PHP GD Library output an image and text content on same page

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>";
?>

JavaScript
​x
 
<?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.

Answer

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>

JavaScript
 
<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>

JavaScript
 
<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>

JavaScript
 
<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);
?>

JavaScript
 
<?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);?>​

Advertisement

Answer