Menu
I am trying to output an image to a browser and then output HTML (not directly related to the image) on the same page. Is this possible? I am having a heck of a time figuring it out. Here is my code I have been messing with:
<?php
function LoadJpeg($imgname){
/* Attempt to open */
$im = @imagecreatefromjpeg($imgname);
/* See if it failed */
if(!$im){
/* Create a black image */
$im = imagecreatetruecolor(150, 30);
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an error message */
imagestring($im, 1, 5, 5, 'Error loading ' . $imgname, $tc);
}
return $im;
}
header('Content-Type: image/jpeg');
$img = LoadJpeg('images/Ball.jpg');
imagejpeg($img);
imagedestroy($img);
//trying to start my text here
header('Content-Type text/html; charset=utf-8');
echo "<br /><h2>ross</h2>";
?>
Right near the bottom of my code is where I try to add in my html. when I run it, I only get the image, then no text after. If I try to move it to the top before the function, right after the opening php tag, the text works correctly, and then I get an error:
Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/newimage.php:4) in /Applications/MAMP/htdocs/newimage.php on line 28
Any help would be greatly appreciated, thanks.
671
Stop and think for a moment. How would you normally embed an image in a HTML file? You create two files: text.html and image.jpg. Same here, you will create two scrips, one that outputs the HTML and one that generates the image. The HTML would look like:
<img src="generateimage.php" alt="generated image"/>
<br/>
<h2>ross</h2>
The generateimage.php script only generates the image.
Lets take for example a form that allows the user to create a digital Christmas card: he can select the image and write a personal note beneath it.
form.html:
<html><body>
<form action="view_card.php" method="post">
Select an image:
<select name="imgname">
<option value="tree">Picture of Christmas tree</option>
<option value="santa">Picture of Santa</option>
</select><br/>
Write a message:
<textarea name="message"></textarea>
<br/>
<input type="submit" value="View Christmas card"/>
</form>
</body></html>
view_card.php:
<html>
<body>
Here is your Christmas card:
<hr/>
<!-- sending the requested image to the generateimage.php script
as a GET parameter -->
<img src="generateimage.php?imgname=<?php echo(urlencode($_POST['imgname'])); ?>"/>
<?php echo(htmlspecialchars($_POST['message'])); ?>
</body>
</html>
generateimage.php:
<?php
/* Stop evil hackers from accessing files they are not supposed to */
$allowed_files = array('tree' => 'tree.jpg', 'santa' => 'santa.jpg');
if( !isset($allowed_files[$_GET['imgname']])) {
exit; // Thank you for playing...
}
/* Attempt to open */
$im = @imagecreatefromjpeg($allowed_files[$_GET['imgname']]);
/* See if it failed */
if(!$im){
/* Create a black image */
$im = imagecreatetruecolor(150, 30);
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an error message */
imagestring($im, 1, 5, 5, 'Error loading ' . $imgname, $tc);
}
header('Content-Type: image/jpeg');
imagejpeg($im);
imagedestroy($im);
?>
See the following question and answers: Base64 Encoding Image.
You have to can encode your image using base64_encode() and then output it within <img> tag like that:
<img src="data:image/x-icon;base64,<?php echo base64_encode($img); ?>"></img>
(see this jsfiddle for a proof).
You can generate image outside of the script that generates HTML. In such case you will need to generate HTML here and set src attribute of <img> tag to the location of the script generating the image. See @Rodin's answer for a slightly more detailed answer regarding this solution.
Did it work? Do you need any more help?
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
