I came across this requirement to process multiple images and text to single final image, while working on a custom product in an eCommerce site. The requirement is, via multiple custom options fields, user would choose different options and the product image gets customized. for eg. `cover type`, `ribbon`, uploads `logo/image` and text were the field, user would input.

On the interface level, i managed to obtain by positioning images one after another and also same with the text, but at the end, i was asked to processed all those and create one single image. I captured those images and text positioning with jquery-UI (on dragstop, as the text and images are made to resizable and draggable). Ok, now let’s focus on blog major task.

Requirement

– to enable PHP GD library

In localhost i have xampp installed. and i can enable that from `php.ini` file. (I uncommented `extension=php_gd2.dll` and restarted xampp server to enable gdlibrary in my local server)

Sample Images : I am taking these three images below (img1.png,im2.png & img3.png)

I am creating a php file ‘create-image.php’ with a function ‘createimageinstantly’

In the codes below I have created a base image of 600×600 with gd-inbuild function `imagecreatetruecolor` and directories path to those images.

	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);

Merging images

Now defining the background of the images, i want to create white background for the processed image. With the gd-inbuild functions `imagecreatefrompng` & `imagecopyresized`, i am merging those images.

		// set background to 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, 150, 150, 225, 225);

Adding text

with the method `imagettftext` we are able to add text on the merged images above.

		// Add the text
		//imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )
		$text = 'School Name Here';
		$font = 'OldeEnglish.ttf';
		imagettftext($outputImage, 32, 0, 150, 450, $white, $font, $text);

Final processing

the method `imagepng` allows us to create final image with those three images merged above with text. whereas the `imagedestroy` would free the memory.

		$filename =$targetPath .round(microtime(true)).'.png';
		imagepng($outputImage, $filename);

		imagedestroy($outputImage);

The result image merged :

the final code

	createimageinstantly();
	//$targetFolder = '/gw/media/uploads/processed/';
	//$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
	//$img3 = $targetPath.'img3.png';
	//echo '
	//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 to 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 the 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);
	}

Usability

A friend of mine was talking about his idea of generating custom Tshirts, where users would input texts or images to upload from the user interface and to deliver as according to the user customizes. So, there you go. Where as my requirement was to create custom diploma covers and the result is what I obtained. Cheers !!

The college logo used here is the copyright of Austin College.

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts