title: PHP Merge jpeg on top of png with alpha transparency
body: <p>I am trying to put a jpeg behind a png - where the png has alpha transparency. </p>
  
  <p>The foreground image is here: 
  <a href="http://peugeot208.srv.good-morning.no/images/marker-shadow.png" rel="nofollow">http://peugeot208.srv.good-morning.no/images/marker-shadow.png</a></p>
  
  <p>The image behind is a facebook profile image - typically like this: 
  <a href="https://graph.facebook.com/100000515495823/picture" rel="nofollow">https://graph.facebook.com/100000515495823/picture</a></p>
  
  <p>The result image looses transparency and is black instead:
  <a href="http://peugeot208.srv.good-morning.no/libraries/cache/test.png" rel="nofollow">http://peugeot208.srv.good-morning.no/libraries/cache/test.png</a></p>
  
  <p>This is the code I use: </p>
  
  <pre><code>// combine image with shadow
  $newCanvas = imagecreatetruecolor(90,135);
  $shadow = imagecreatefrompng("marker-shadow.png");  
  
  //imagealphablending($newCanvas, false);
  imagesavealpha($newCanvas, true);   
  
  imagecopy($newCanvas, $canvas, 20, 23, 0, 0, 50, 50);
  imagecopy($newCanvas, $shadow, 0, 0, 0, 0, 90, 135);
  imagepng($newCanvas, $tempfile, floor($quality * 0.09));
  </code></pre>
  
  <p>If I enable imagealphablending($newCanvas, false);, the result is correct (with the hole in the middle of the marker being transparent) BUT the image behind is gone. </p>
  
  <p>Can you shed light on this? :-) </p>
  
  <p>Thanks! </p>
  
  <p><strong>Edit: Found a solution</strong></p>
  
  <p>I did some fiddling and ended up with this code - where the origin is not a createimagetruecolor but an image created from a template - which is a transparent png. </p>
  
  <p>Now it works - the result is properly transparent. I don't really know why. Got an idea why? </p>
  
  <p><strong>fbimage.php</strong></p>
  
  <pre><code>// Create markerIcon 
  $src = $_REQUEST['fbid'];
  
  $base_image = imagecreatefrompng("../images/marker-template.png");
  $photo = imagecreatefromjpeg("https://graph.facebook.com/".$src."/picture");
  $top_image = imagecreatefrompng("../images/marker-shadow.png");
  
  imagesavealpha($base_image, true);
  imagealphablending($base_image, true);
  
  imagecopy($base_image, $photo, 20, 23, 0, 0, 50, 50);
  imagecopy($base_image, $top_image, 0, 0, 0, 0, 90, 135);
  imagepng($base_image, "./cache/".$src.".png");
  
  ?&gt;
  
  &lt;img src="./cache/&lt;?php echo $src ?&gt;.png" /&gt;
  </code></pre>
  
  <p><strong>Update: Check the following code</strong>
  You can find the result here: <a href="http://peugeot208.srv.good-morning.no/images/marker.php" rel="nofollow">http://peugeot208.srv.good-morning.no/images/marker.php</a>
  As you can see, the background is still black. </p>
  
  <pre><code>// create base image
  $base_image = imagecreatetruecolor(90,135);
  $photo = imagecreatefromjpeg("marker-original.jpg");
  $top_image = imagecreatefrompng("marker-shadow.png");
  
  imagesavealpha($top_image, true);
  imagealphablending($top_image, true);
  
  imagesavealpha($base_image, true);
  imagealphablending($base_image, true);
  
  // merge images
  imagecopy($base_image, $photo, 20, 23, 0, 0, 50, 50);
  imagecopy($base_image, $top_image, 0, 0, 0, 0, 90, 135);
  
  // return file
  header('Content-Type: image/png');
  imagepng($base_image);
  </code></pre>