imagerotate with GD

[falcon1]

Hey everyone. Here is what I am trying to do. I have two images. I need to rotate both of them (2 different degrees, which is determined by a random number), then I need to merge them together so that the center of both images are on top of each other. So far, I have both images, I rotate them, and I use imagecopymerge() to put them together. The only problem I am having is that the centers dont always line up properly. As far as I can tell, the reason for this is that they are square images (both 200x200), and depending on how they rotate, the corners of the boxes are kind of pushing the image in defferent directions, causing them both to shift around the page a little bit, and not line up properly when merged.

I was wondering if this is a known issue, or if anyone has any ideas on how to get the two images to line up correctly.

Really appreciate any help. Thanks a lot!! 🙂

[barand]

The rotated square image is going to be wider and higher than the original. Calculate half the diff in width and halfthe dif in height. These as the top-left (x,y) coords of the src image when copying

  $im = imagecreate(200,200);
  $white = imagecolorallocate($im,0xFF,0xFF,0xFF);

  $im1 = imagecreatefrompng('imageA.png');
  $imr1 = imagerotate($im1,45, $white);
  $dx = (imagesx($imr1) - imagesx($im1))/2;
  $dy = (imagesy($imr1) - imagesy($im1))/2;
  imagecopy ($im,$imr1,0,0,$dx,$dy,200,200);

  $im2 = imagecreatefrompng('imageB.png');
  $imr2 = imagerotate($im2,30, $white);
  $dx = (imagesx($imr2) - imagesx($im2))/2;
  $dy = (imagesy($imr2) - imagesy($im2))/2;
  imagecopymerge ($im,$imr2,0,0,$dx,$dy,200,200, 50);

  header ("content-type: image/png");
  imagepng($im);
  imagedestroy($im); 
  imagedestroy($im1); 
  imagedestroy($imr1); 
  imagedestroy($im2); 
  imagedestroy($imr2); 

[falcon1]

Ok, I must have something wrong in mine. Here is how I did it:

<?php
$new_head = $_GET['new_head'];
// File and rotation
$filename = 'test.jpg';
$degrees = $new_head;

// Content type
header('Content-type: image/jpeg');

// Load both images
$source = imagecreatefromjpeg($filename);
$insert = imagecreatefromjpeg("test2.jpg"); 

//background color for base image
$white = imagecolorallocate($source,255,255,255);

//make overlay image transparent
imagecolortransparent($insert,imagecolorat($insert,0,0));

// Rotate both images
$rotate_overlay = imagerotate($insert, -10, $white);
$rotate = imagerotate($source, $degrees, $white);

//get size of overlay
$insert_x = imagesx($insert); 
$insert_y = imagesy($insert);

//set the transparent color of the overlay image
imagecolortransparent($rotate_overlay,imagecolorat($insert,0,0));

//merge images, and output the final image
imagecopymerge($rotate,$rotate_overlay,0,0,0,0,$insert_x,$insert_y,100);
imagejpeg($rotate,"",100); 
?>

If I change "$insert_x = imagesx($insert); " to "$insert_x = imagesx($insert) - imagesx($rotate_overlay))/2;" (and same with the y), the image does not show up at all. Did I go about doing this all wrong? Just trying to learn some new stuff. Thanks!

[barand]

1 ) $insert_x = imagesx($insert) - imagesx($insert))/2 always eveluates to 0. you want the difference between the original image width and the width when it is rotated.

2 ) you put the values in the width, height postions and not in the src_x, src_y psitions when calling imagecopymerge

[falcon1]

Sorry - edited the above post to this: $insert_x = imagesx($insert) - imagesx($rotate_overlay))/2;

So, for the width, and height, I now have:

$insert_x = imagesx($insert) - imagesx($rotate_overlay))/2; 
$insert_y = imagesy($insert) - imagesx($rotate_overlay))/2;

And the call to copymerge:

imagecopymerge($rotate,$rotate_overlay,0,0,$insert_x,$insert_y,200,200,100);

With those, I am still not getting the image to show up. I'm sure I am missing something pretty obvious, but I dont see it. 🙂 Thanks again!

[barand]

There are two approaches to this problem.

When you rotate the first image it gets larger so instead of the centre being at 100,100 it now moves to, say, 110, 110.

The first way is copy this rotated image so the centre remains at 100, 100 (my method) and then place the second image over this, again allowing for the rotated size increase.

The second way is to keep the enlarged first image with its displaced centre then align the second image over the new centre.

Which are you trying to do, because the maths will me slightly different?

[falcon1]

Ok, that explains why implementing parts of your way into mine causes it to not work. Lets start with your way. I dont understand how copying the rotated image keeps its center in a fixed location. Would it just copy the image at its displaced location?

How would I go about doing it the second way (aligning the overlay image onto the base image, wherever it may be)? Thanks!

[barand]

In my code I create a blank image and copy both rotated images into that one, calculating the required offsets (dx, dy) to keep them centered.

The second way - you would have to offset the second image by a diff (cumlative ?) amount to center it over the first. I'll need to experiment to get formula

[barand]

This is my code implementig option 2.

Note, the first method retains the 200x200 image size. This option does not.

  $im1 = imagecreatefrompng('imageA.png');
  $white = imagecolorallocate($im1,0xFF,0xFF,0xFF);
  $im = imagerotate($im1,45, $white);

  $dx1 = (imagesx($im) - imagesx($im1))/2;
  $dy1 = (imagesy($im) - imagesy($im1))/2;

  $im2 = imagecreatefrompng('imageB.png');
  $white2 = imagecolorallocate($im2,0xFF,0xFF,0xFF);
  $imr2 = imagerotate($im2,30, $white2);
  $w2 = imagesx($imr2);
  $h2 = imagesy($imr2);
  $dx = $dy = 0;
  $dx2 = (imagesx($imr2) - imagesx($im2))/2;
  $dy2 = (imagesy($imr2) - imagesy($im2))/2;
  imagecopymerge ($im,$imr2,$dx1-$dx2,$dy1-$dy2,0,0,$w2,$h2, 50);

  header ("content-type: image/png");
  imagepng($im);
  imagedestroy($im);
  imagedestroy($im1);
  imagedestroy($im2);
  imagedestroy($imr2);