Text on Image

Tapan · January 16, 2011, 2:37pm

Hello,

I found the following code which places text on a white background. Can anyone please tell me how can I put the text on an existing image ?

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

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>

I already have the image created and I just want to use it and put text on it and create a new copy which is with the text. How will I achieve that ?

Thanks.

Rubble · January 16, 2011, 2:51pm

This is some old code of mine:


<?php
// Create the canvas
$canvas = imagecreate( 200, 100 );  
// Define the colours to use
$black = imagecolorallocate( $canvas, 0, 0, 0 );  
$white = imagecolorallocate( $canvas, 255, 255, 255 );  
// Create a rectangle and fill it white
imagefilledrectangle( $canvas, 0, 0, 200, 100, $white );  
// The path to the font
$font = "verdana.ttf"; 
// The text to use 
$text = "House"; 
// The font size 
$size = "30";   
// Set the path to the image to watermark
$input_image = "House.jpg"; 
// Calculate the size of the text 
// If php has been setup without ttf support this will not work.
$box = imagettfbbox( $size, 0, $font, $text );  
$x = (200 - ($box[2] - $box[0])) / 2;  
$y = (100 - ($box[1] - $box[7])) / 2;  
$y -= $box[7];  
// Add the text to the image
imageTTFText( $canvas, $size, 0, $x, $y, $black, $font, $text );  
// Make white transparent
imagecolortransparent ( $canvas, $white );  
// Save the text image as temp.png
imagepng( $canvas, "temp.png" );  
// Cleanup the tempory image canvas.png
ImageDestroy( $canvas );  
// Read in the text watermark image
$watermark = imagecreatefrompng( "temp.png" );  
// Returns the width of the given image resource  
$watermark_width = imagesx( $watermark );
//Returns the height of the given image resource    
$watermark_height = imagesy( $watermark );    
$image = imagecreatetruecolor( $watermark_width, $watermark_height );    
$image = imagecreatefromjpeg( $input_image );
// Find the size of the original image and read it into an array      
$size = getimagesize( $input_image );  
// Set the positions of the watermark on the image
$dest_x = $size[0] - $watermark_width - 100;    
$dest_y = $size[1] - $watermark_height - 200;    
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 50);   
// Save the watermarked image as watermarked.jpg 
imagejpeg( $image, "watermarked.jpg" );
// Clear the memory of the tempory image     
imagedestroy( $image );    
imagedestroy( $watermark );    
// Delete the text watermark image
unlink( "temp.png");  
?>

This image is the result of some similar GD code

Or you could use imagemagick:


<?php
$font = "../fonts/verdana.ttf"; 
$text = "Sunflower"; 
$size = "40"; 
$degrees = "30"; 
$photo= "sunflower.jpg";

$cmd = "$photo -font $font -pointsize $size -fill rgba(0,0,0,0.4) ".
" -gravity north -annotate +0+25 $text ";

exec("convert $cmd watermark_IM.jpg"); 
?>

Tapan · January 16, 2011, 3:24pm

Hello,

Thanks for the code. Based on yours and sample code, I created the following code. But it seems or maybe its just me thinking: I think the text is not centered width wise in the image. Can you please check my calculation for centering the text both width and height wise ?

<?php
$img = imagecreatefromjpeg("yellow.jpg");
$width = imagesx( $img );
$height = imagesy( $img );

$new_width = $width;
$new_height = $height;

$tmp_img = imagecreatetruecolor( $new_width, $new_height );
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// Create some colors
$black = imagecolorallocate($tmp_img, 0, 0, 0);

// Define Font
$font = 'jokerman.ttf';
$font = 'arial.ttf';

// The text to draw
$text = '01234567890';

$size = 75;

// Compute size of text and get the x and y for centering the text into the image
$box = imagettfbbox( $size, 0, $font, $text );   
//$x = $box[0] + (imagesx($img) / 2) - ($box[4] / 2) - 10;
//$y = $box[1] + (imagesy($img) / 2) - ($box[5] / 2) - 0;

$x = ($width - $box[2]) / 2 - 5;
$y = ($height - $box[5]) / 2;

// Add the text
imagettftext($tmp_img, $size, 0, $x, $y, $black, $font, $text);

imagejpeg( $tmp_img, "testing.jpg" );
                
imagedestroy ($img);
imagedestroy ($tmp_img);
?>
<img src="testing.jpg">

Thanks.

Rubble · January 16, 2011, 3:59pm

It was a long time ago when I wrote this code; I have a feeling you need to use my method of calculating the position of the box as its not as straight forward as you think.

Try commenting your code out and try mine; you could always echo the contents of the variables $x & $y and calculate what it should be as confirmation.

Tapan · January 16, 2011, 4:43pm

Hi,

Ok thanks. One ques: I have converted it into an function called: CreateImage (params).

Now I made a html form and asked for text to put on image. Upon clicking the submit button I want to show the images without creating the temp file. How do I show 2 images with same text without creating the temp files ?

So it would be something like:

Thanks.

team1504 · January 16, 2011, 6:25pm

I know this solution involved no php, but couldn’t one make the image a background of an element using css and the just put text inside that element.
Like this:

<!Doctype HTML>
<html lang="en">
<head>
<title>Text on an image</title>
<style type="text/css">
div#textonSunflower{
                     background:url(http://www.nps.gov/wica/naturescience/images/Annual-Sunflower.jpg) no-repeat;
width:415px;
height:492px;
color:#000;
font-size:18px;
font-family: Lucidia sans, Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="textonSunflower">
I am a sunflower
</div>
</body>
</html>

Rubble · January 16, 2011, 7:59pm

How do I show 2 images with same text without creating the temp files ?

I would say not very easily - I think your best bet would be to create the images and then delete them later.

Tapan · January 21, 2011, 4:48pm

Hi,

Is it possible to put background colour also for text ? If yes then please suggest how ?

Thanks.