Multiple Images and HTML in one File using GD Library - php

Question

Good day everyone.
Long story short, I'm trying to make an online card game much like urban rivals.
To do so, I'm using mainly PHP and SQL.
Right now, I'm trying to generate the png file of a card based on a database.
I've already managed to merge images with alpha channel, to add text to an image, but my real problem is : I cannot seem to be able to output this image along with other and the basic layout of a HTML document. Here is my test code :
<?php
include 'phpGDtools.php';
$image1path = 'monstercard.png';
$image2path = 'monsterimage.png';
$xdim = 220;
$ydim = 301;
//$image = mergeTwoPNGAndReturn($image1path, $image2path, $xdim, $ydim);
mergeTwoPNGAndOutputInBrowser($image1path, $image2path, $xdim, $ydim);
echo('Hello !');
?>
Sorry for the bad formatting, I haven't been able to make it better :/
Here is my function in phpGDTools.php:
function mergeTwoPNGAndOutputInBrowser($image1path, $image2path, $xdim, $ydim)
{
//TEST FUNCTION
//Both paths to the images, x and y dimensions of the image you're about to fuse.
$final_img = imagecreate($xdim, $ydim);
//Step 1 : Create the objects from the PNGs
$image_1 = imagecreatefrompng($image1path);
$image_2 = imagecreatefrompng($image2path);
//Step 1.2 : Allow transparency of bases.
imagealphablending($image_1, true);
imagesavealpha($image_1, true);
imagealphablending($image_2, true);
imagesavealpha($image_2, true);
//Step 2 : Merge the images into one.
imagecopy($image_1, $image_2, 0, 0, 0, 0, $xdim, $ydim);
imagecopy($final_img, $image_1, 0, 0, 0, 0, $xdim, $ydim);
//Step 3 : Allow transparency of final image.
imagealphablending($final_img, true);
imagesavealpha($final_img, true);
//Step 4 : Output image to browser.
header('Content-Type: image/png;');
imagepng($image_1);
}
This outputs very well the image, as intended, but the text "Hello !" is nowhere to be found.
Also, please ignore the part about "$final_image" it's just for testing.
You may have noticed I commented this line :
//$image = mergeTwoPNGAndReturn($image1path, $image2path, $xdim, $ydim);
This is the function I want to use : hopefully, my goal would be to include this php file into an html page, and then being able to print the image object between two tags.
Technically, I could save it as afile and then output the file, but that would be extremely inefficient considering my project.
Thank you for helping me out.
~Jules Courtois

Answer 1

You're setting the content type to an image, so anything you send back will be interpreted as an image. When you're echoing HTML you're adding to the image data which is resulting in the browser not being able to read the image.
You need to create a HTML page then reference images within the HTML file with a or tag with the src to the URL of the image or you can base64 an image to use it inline.
You could replace
imagepng($image_1);
with
ob_start();
imagejpeg($image_1);
$image_data = ob_get_contents ();
ob_end_clean ();
$image_data_base64 = base64_encode($image_data);
echo '<img src="data:image/png;base64,' . $image_data_base64 . '" />';
You should avoid processing images on the fly and try to store them but this should achieve what you asked in the question.

Answer 2

It looks like you are trying to output image data and html data from the same php script.
You call the function
mergeTwoPNGAndOutputInBrowser();
which outputs the image header to the browser.
And then you
echo('Hello !');
Where 'hello' is text data and not image data... So its not displayed in the image.
You could do something like this.
<?php
include 'phpGDtools.php';
$image1path = 'monstercard.png';
$image2path = 'monsterimage.png';
$xdim = 220;
$ydim = 301;
if(isset($_GET['display_image'])){
//Output image data
mergeTwoPNGAndOutputInBrowser($image1path, $image2path, $xdim, $ydim);
}
else{
//Output page data
echo 'Hello !';
echo "<img src=\"?display_image\">";
}
?>

Answer 3

The Text is not displaying since you have set the header
header('Content-Type: image/png;');
Why don't you use the imagestring() of the same PHP GD Library. It let's you write text on the image.
Here's a cool example. You can embed this same code to your mergeTwoPNGAndOutputInBrowser() function.
<?php
// Create a 100*30 image
$im = imagecreate(100, 30);
// White background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);
// Write the string at the top left
imagestring($im, 5, 0, 0, 'Hello world!', $textcolor);
// Output the image
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>
Source