Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Applying Text to Image with Transparency

PHP and Graphics

Applying Text to Image with Transparency

by  Karl Blessing  Posted    (Edited  )
Most people know how to throw some text onto an image, but what about not only putting the text on the image, but also controlling the transparency of that image. Here is a simple code that does just that, edit the variables as needed.

Code:
Header ("Content-type: image/png");

	//The copy of the image that will act as the bottom layer
	$src_img = imagecreatefromjpeg('path to the image');
	//The copy of the image that will act as the transparent top layer
	$cpy_img = imagecreatefromjpeg('same path to the image');

	//stores the image's dimensions
	$img_width = imagesx($src_img);
	$img_height = imagesy($src_img);

	//The color of the font you wish to draw 0 to 255 for each value to make a truecolor result
	$red = 0;
	$green = 0;
	$blue = 0;
	
	//allocates the font color based on the RGB value
	$font_color = imagecolorallocate($src_img, $red, $green, $blue);
	//Sets the font file, this can be just about any true type font you upload to the server
	$font_file = "/home/kb244/arial.ttf";
	//Sets the font size, based on point sizes, such as 8, 10, 14, 16, so on
	$font_size = 28;
	//Sets the angle of the font
	$angle = 0;
	
	//finds the boundary of the text box, this part is setup with the assumption of 0 degree angle
	//an angle other than zero the next three lines may not be accurate
	$textdimension = imagettfbbox($font_size,$angle, $font_file, "Karl Blessing Photography");
	$textheight = $textdimension[3] - $textdimension[5];
	$textwidth = $textdimension[2] - $textdimension[0];

	$position = "center"; //choices are top, bottom, center
	
	if (strcmp($position, "top") == 0)
		$y_start = $textheight;
	elseif (strcmp($position, "bottom") == 0)
		$y_start = $new_h - ($textheight / 2);
	else
		$y_start = ($new_h / 2) - ($textheight / 2);
	
	//Sets the horizontal starting position to allow for a horizontally centered text
	$x_start = ($new_w - ($line_width[2] - $line_width[0])) / 2;
	
	$transparency = 50; //set this reverse what you want, if you want 25% transparency on text, set this to 75
	
	//applies the text onto the bottom layer
	imagettftext($src_img, $font_size, $angle, $x_start, $y_start, $black, $font_file, "Karl Blessing Photography");
	
	//merges the top copy over the altered bottom copy causing the illusion of transparent text
	imagecopymerge( $src_img, $cpy_img, 0 , 0 , 0, 0, $new_w, $new_h, $tran);
	
	//Caches the image for later use so you dont hog the processor
	imagejpeg($src_img,$wm_cache.$gallery."_".$file.".jpg", 80); 
	
	//Sends the new data back to the browser for viewing
	imagejpeg($src_img,"",80);
	
	//Clears the images from memory
	imagedestroy($cpy_img);
	imagedestroy($src_img);

it is recomended you cache the images for later use so you dont overuse the processor from people visiting and viewing the image on number of hits. To help this, place this line right above the imagejpeg line near the bottom

Code:
imagejpeg($src_img,'path and file name to cache folder', 80);

Adjust the last number to the compression level desired ( from 0 to 100 , 100 being best quality, 0 being smallest file size ) Make sure the destination folder where you are caching the image is set to be writable, and modify the code to check for the presense of this file so that if it does exist simply send the data from it to the browser such as this method:

Code:
if ((file_exists('path to file'))
{
	$dst_img = imagecreatefromjpeg('path to file');
	imagejpeg($dst_img);
	imagedestroy($dst_img);
}
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top