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 figurin
Store only your image creation code in its own php script. Then you call the script in your HTML as if it were a regular image with the img tag like this:
<img src="jpegscript.php" alt="image"/>
you can't set the header once output has been sent to the browser. Instead send everything as text/html and insert the raw image data into an img tag
<?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);
}
// Changed the following line to return the output
// of imagejpeg() instead of the image object
return imagejpeg($im);
}
$img = LoadJpeg('images/Ball.jpg');
//trying to start my text here
header('Content-Type text/html; charset=utf-8');
// img tag with image raw data set as source
echo '<img src="data:image/jpeg;base64,'.base64_encode($img).'" alt="photo">';
echo "<br /><h2>ross</h2>";
?>
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?
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);
?>