How to add text below the image using PHP?

Question

I am using following PHP code to write text with the background color on the image using PHP code.

But it's adding the text with the background color on the image. I need to add the text to background color below the image. How can I do this with PHP?

PHP code:

// Create Image From Existing File
$jpg_image = imagecreatefromjpeg('02.JPG');
$orig_width = imagesx($jpg_image);
$orig_height = imagesy($jpg_image);

// Allocate A Color For The background
$bcolor=imagecolorallocate($jpg_image, 255, 255, 255);

//Create background
imagefilledrectangle($jpg_image,  0, $orig_height*0.9, $orig_width, $orig_height, $bcolor);

// Set Path to Font File
$font_path = realpath(dirname(__FILE__)).'/arial.ttf';

// Set Text to Be Printed On Image
$text = "New Content Goes to here";

// Allocate A Color For The Text
$color = imagecolorallocate($jpg_image, 0, 0, 0);      

// Print Text On Image
imagettftext($jpg_image,  20, 0, 10, $orig_height-10, $color, $font_path, $text);

//Set the Content Type
header('Content-type: image/jpg');

// Send Image to Browser
imagejpeg($jpg_image);

// Clear Memory
imagedestroy($jpg_image);

Image:

enter image description here

You mean <img src='' alt='text'> where text inside alt is the text below image? — Ngo Tuan
– Ngo Tuan, Commented Jan 5, 2018 at 16:39
@NgoTuan Please check this image: i.sstatic.net/TJ7al.png I hope you will understand now. — user8625234
– user8625234, Commented Jan 5, 2018 at 16:43
@NicoHaase Please check this link for the image: i.sstatic.net/TJ7al.png — user8625234
– user8625234, Commented Jan 5, 2018 at 16:44
@NicoHaase there are many use cases for adding quotes directly to an image rather than in the medium. — Mm-Art-In
– Mm-Art-In, Commented Jan 5, 2018 at 16:57

Mm-Art-In · Accepted Answer · 2018-01-05 16:57:03Z

Looking at your code, what you seem to want is to expand the image canvas and then write the text underneath it.

You can't add text below the image as a separate (non-image) entity because your HTML headers are outputting just the image.

So; to add text on to the image:

Create a new canvas, the size of the image plus an extra height (~5%)
Set the background colour of the canvas (this will appear behind the text)
Import the image onto the canvas
Import the text below the image.

Vwallah!

// Create Image From Existing File
$jpg_image = imagecreatefromjpeg('02.JPG');
$orig_width = imagesx($jpg_image);
$orig_height = imagesy($jpg_image);


// Create your canvas containing both image and text
$canvas = imagecreatetruecolor($orig_width,  ($orig_height + 40));
// Allocate A Color For The background
$bcolor = imagecolorallocate($canvas, 255, 255, 255);
// Add background colour into the canvas
imagefilledrectangle( $canvas, 0, 0, $orig_width, ($orig_height + 40), $bcolor);

// Save image to the new canvas
imagecopyresampled ( $canvas , $jpg_image , 0 , 0 , 0 , 0, $orig_width , $orig_height , $orig_width , $orig_height )

// Tidy up:
imagedestroy($jpg_image);

// Set Path to Font File
$font_path = realpath(dirname(__FILE__)).'/arial.ttf';

// Set Text to Be Printed On Image
$text = "New Content Goes to here";

// Allocate A Color For The Text
$color = imagecolorallocate($canvas, 0, 0, 0);      

// Print Text On Image
imagettftext($canvas,  20, 0, 10, $orig_height-10, $color, $font_path, $text);

//Set the Content Type
header('Content-type: image/jpg');
imagejpeg($canvas);
imagedestroy($canvas);

NOTE

This is not the best way of doing this if it is intended to be viewed on a non-image-only medium, such as websites. It is far better to use HTML5 <figure> and <figcaption> elements .
Note that the extra size of the canvas will need to be adjusted if the caption text to add is multiple lines, etc. Also that line wrapping may not occur naturally and will need to be manually set.
This in general is very memory inefficient and depending on exactly what sort of outcome you want to achieve, there will be better ways of doing this.
Another (non-PHP) way which is far more efficient is to use SVG graphics.

Collectives™ on Stack Overflow

How to add text below the image using PHP?

1 Answer 1

NOTE

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

NOTE

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related