php - How to merge multiple images and text into single image? -


i have multiple png images inside div, images png , presents single image user depending on custom options he/she has selected. also, adding text enabled other feature, allows div texts add above of images.

now want generate image multiple images , text combined, maintaining font-family & size of text.

for eg. image appears on interface combination of images , text. (it's managed appear css positioning) enter image description here made of 2 images below , text

![enter image description here enter image description here

this tried taking images : create-image.php file

<?php createimageinstantly(); function createimageinstantly($img1='',$img2='',$img3=''){     $x=$y=1000;     header('content-type: image/png');     $targetfolder = '/gw/media/uploads/processed/';     $targetpath = $_server['document_root'] . $targetfolder;      $img1 = $targetpath.'img1.png';     $img2 = $targetpath.'img2.png';     $img3 = $targetpath.'img3.png';      $outputimage = imagecreatetruecolor(1000, 1000);      $first = imagecreatefrompng($img1);     $second = imagecreatefrompng($img2);     $third = imagecreatefrompng($img3);      imagecopy($outputimage,$first,0,0,0,0, $x, $y);     imagecopy($outputimage,$second,0,0,0,0, $x, $y);     imagecopy($outputimage,$third,0,200,-200,0, $x, $y);      imagepng($outputimage, $targetpath .round(microtime(true) * 1000).'.png');      imagedestroy($outputimage);  } ?> 

but gives me whole black colored image ![enter image description here

also, need mix text on generated image

edited :

  • jpg images changed png

  • imagecopymege changed imagecopy

latest result :

       <?php             createimageinstantly();             //$targetfolder = '/gw/media/uploads/processed/';             //$targetpath = $_server['document_root'] . $targetfolder;             //$img3 = $targetpath.'img3.png';             //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));             function createimageinstantly($img1='',$img2='',$img3=''){                 $x=$y=600;                 header('content-type: image/png');                 $targetfolder = '/gw/media/uploads/processed/';                 $targetpath = $_server['document_root'] . $targetfolder;                  $img1 = $targetpath.'img1.png';                 $img2 = $targetpath.'img2.png';                 $img3 = $targetpath.'img3.png';                  $outputimage = imagecreatetruecolor(600, 600);                  // set background white                 $white = imagecolorallocate($outputimage, 255, 255, 255);                 imagefill($outputimage, 0, 0, $white);                  $first = imagecreatefrompng($img1);                 $second = imagecreatefrompng($img2);                 $third = imagecreatefrompng($img3);                  //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )                 imagecopyresized($outputimage,$first,0,0,0,0, $x, $y,$x,$y);                 imagecopyresized($outputimage,$second,0,0,0,0, $x, $y,$x,$y);                 imagecopyresized($outputimage,$third,200,200,0,0, 100, 100, 204, 148);                  imagepng($outputimage, $targetpath .round(microtime(true)).'.png');                  imagedestroy($outputimage);             }         ?> 

and output image enter image description here

and achieved way,

used these 3 images, img1.png,img2.png,img3.png

enter image description hereenter image description hereenter image description here

and create-image.php file

 <?php         createimageinstantly();         //$targetfolder = '/gw/media/uploads/processed/';         //$targetpath = $_server['document_root'] . $targetfolder;         //$img3 = $targetpath.'img3.png';         //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));         function createimageinstantly($img1='',$img2='',$img3=''){             $x=$y=600;             header('content-type: image/png');             $targetfolder = '/gw/media/uploads/processed/';             $targetpath = $_server['document_root'] . $targetfolder;              $img1 = $targetpath.'img1.png';             $img2 = $targetpath.'img2.png';             $img3 = $targetpath.'img3.png';              $outputimage = imagecreatetruecolor(600, 600);              // set background white             $white = imagecolorallocate($outputimage, 255, 255, 255);             imagefill($outputimage, 0, 0, $white);              $first = imagecreatefrompng($img1);             $second = imagecreatefrompng($img2);             $third = imagecreatefrompng($img3);              //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )             imagecopyresized($outputimage,$first,0,0,0,0, $x, $y,$x,$y);             imagecopyresized($outputimage,$second,0,0,0,0, $x, $y,$x,$y);             imagecopyresized($outputimage,$third,200,200,0,0, 100, 100, 204, 148);              // add text             //imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )             //$white = imagecolorallocate($im, 255, 255, 255);             $text = 'school name here';             $font = 'oldeenglish.ttf';             imagettftext($outputimage, 32, 0, 150, 150, $white, $font, $text);              $filename =$targetpath .round(microtime(true)).'.png';             imagepng($outputimage, $filename);              imagedestroy($outputimage);         }     ?> 

and result image enter image description here

reference : imagecopyresized & imagettftext

thank suggestions made via comments/answers. , blogged in detail http://sumankc.com/2016/01/30/merge-multiple-images-and-text-to-create-single-image-php-gd-library/ day !!


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -