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

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.

回答1:

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

回答2:

Including image in HTML

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).

Generating image in different file

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?

回答3:

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


?>

回答4:

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"/>

来源：https://stackoverflow.com/questions/8338695/php-gd-library-output-an-image-and-text-content-on-same-page

标签

php