Joining Multiple Images into one with a PHP script

Question

I have this test page http://thechozenfew.net/projects/write_font.php that generates the text in the input box as a font. Each letter is a different picture, How would i join all these pictures into one image with a php script?

This what i've tried so far but the images appear on top of each other.

Header ("Content-type: image/gif"); 

$image1Url = "../images/avatar.png";
$image2Url = "../images/key.png";
$image3Url = "../images/safari.png";
$image1 = imageCreateFromPNG($image1Url);
$image2 = imageCreateFromPNG($image2Url);
$image3 = imageCreateFromPNG($image3Url);

$colorTransparent = imagecolorat($image1, 0, 0);
imageColorTransparent ($image1, $colorTransparent);

$colorTransparent = imagecolorat($image2, 0, 0);
imageColorTransparent ($image2, $colorTransparent);

$colorTransparent = imagecolorat($image3, 0, 0);
imageColorTransparent ($image3, $colorTransparent);

imageCopyMerge($image1, $image2, 0, 0, 0, 0, 96, 96, 100);

imageCopyMerge($image1, $image3, 0, 0, 0, 0, 96, 96, 80);

ImagePng ($image1);


ImageDestroy ($image1);
ImageDestroy ($image2);

Answer 1

Your script is merging the images on top of each other (see the manual for imagecopymerge). The parameters $dst_x and $dst_y control where to place the source image on the merged canvas.

You need to specify the offset from the previous image to merge them:

<?
    $offset2x = imagesx($image1);
    imageCopyMerge($image1, $image2, $offset2x, 0, 0, 0, 96, 96, 100);

    $offset3x = $offset2x + imagesx($image2);
    imageCopyMerge($image1, $image3, $offset3x, 0, 0, 0, 96, 96, 80);
?>

Note that you will have to increase the size of $image1 to hold all 3 images next to each other.

Answer 2

I made a transparent png that will act as a Canvas for the other pictures here is how the code looks now

//Create transparent PNG Canvas
$png = imagecreatetruecolor(800, 100);
imagesavealpha($png, true);

$trans_colour = imagecolorallocatealpha($png, 0, 0, 0, 127);
imagefill($png, 0, 0, $trans_colour);
//End Canvas

$url = "../../images/socom_font/normal/Socom";
$letter = array("W","O","R","K","S");

foreach($letter as $a){
    $image[] = $url.$a.".png";
}

$image2Url = $image[0];
$image3Url = $image[1];
$image2 = imageCreateFromPNG($image2Url);
$image3 = imageCreateFromPNG($image3Url);

$colorTransparent = imagecolorat($image2, 0, 0);
imageColorTransparent ($image2, $colorTransparent);

$colorTransparent = imagecolorat($image3, 0, 0);
imageColorTransparent ($image3, $colorTransparent);

$offset1x = 10;
imageCopyMerge($png, $image2, $offset1x, 0, 0, 0, 100, 120, 100);

$offset2x = $offset1x + imagesx($image2);
imageCopyMerge($png, $image3, $offset2x, 0, 0, 0, 100, 96, 100);
////-----------------------------------------------///////////////////
Header ("Content-type: image/gif"); 

//This will create the image!
ImagePng ($png);

ImageDestroy ($image3);
ImageDestroy ($image2);

Here is the live link for this script http://thechozenfew.net/projects/font/ImageMerge.php it still needs some more work as those black shades appear around the images. How can i fix that?

Answer 3

So here what i ended up with

<?php
header('Content-type: image/png');

function imageComposeAlpha( &$src, &$ovr, $ovr_x, $ovr_y, $ovr_w = false, $ovr_h = false, $opc = 127){
 imagecopy($src, $ovr, $ovr_x, $ovr_y, 0, 0, imagesx($ovr), imagesy($ovr) );
}

////////////////////////---////////-----------------------------------

$url = "../../images/socom_font/normal/Socom";

//Covert the String iinto an Array
 $letter = str_split(strtoupper ($_GET['name']));
//Populate Letters Image Path
 foreach($letter as $a){
   //exeptions
  if($a == "?"){ $a = "Question"; }
  if($a == "/"){ $a = "Slash"; }
  if($a == "%"){ $a = "Percent"; }
  if($a == " "){ $a = "Space"; }
  $image[] = $url.$a.".png";
 }unset($a); 
//Create the Letters Image Objects
 foreach($image as $a){
  $image['obj'][] = imageCreateFromPNG($a);
 }unset($a);
//calculate Canvas Width
 foreach($image['obj'] as $a){
  if(!isset($canvasW)){ $canvasW = 0; }
  $canvasW = imagesx($a) + $canvasW;
 }unset($a);
//Create Canvas
 $photoImage = imagecreatetruecolor($canvasW,100);
 imagesavealpha($photoImage, true);
 $trans_color = imagecolorallocatealpha($photoImage, 0, 0, 0, 127);
 imagefill($photoImage, 0, 0, $trans_color);

//Merge Images
 foreach($image['obj'] as $a){
  $width = ceil(imagesx($a));
  if(!isset($offset)){ $offset = 1; }

  imageComposeAlpha($photoImage, $a, $offset, 0,$width,100);

  if($offset >= 1){
   $offset = $offset + $width;
  }
 }unset($a);
// Save it
 //Imagepng($photoImage, 'done.png'); 
// Output to browser 
 Imagepng($photoImage); 

//Destroy all Image Objects
 foreach($image['obj'] as $a){
  ImageDestroy($a);
 }
 ImageDestroy($photoImage);
?>

The Live Link http://thechozenfew.net/projects/font/ImageMerge.php?name=it%20works