Create and render multiple images on the fly in PHP

Question

I am working on the following code. Why am I not able to render generated images to the page on the fly?

<?php
 for ($i = 0; $i <= 3; $i++) {
   $im = imagecreatetruecolor(320, 80);
   $text_color = imagecolorallocate($im, 255, 255, 255);
   imagestring($im, 20, 20, 5,  "Test App", $text_color);

   $img = imagejpeg($im, 'Test.jpg');

   echo '<div class="map"><img src="'.$img.'" class="img-responsive" alt="Cinque Terre"></div>';

  imagedestroy($im);
  }
?>

What I am getting in the output now is

while the src attributes of the images are 1 !

`$img` is set to true because `imagejpeg()` is returning a boolean. — Blake, Sep 01 '16 at 22:55

score 2 · Accepted Answer · answered Sep 01 '16 at 23:21

Capture the byte stream, then convert. You'll need to base64_encode the raw byte. Then use it in the image tag:

Basic idea:

for ($i = 0; $i <= 3; $i++) {
    ob_start(); // begin capture
    $im = imagecreatetruecolor(320, 80);
    $text_color = imagecolorallocate($im, 255, 255, 255);
    imagestring($im, 20, 20, 5,  "Test App " . ($i + 1), $text_color);

    $img = imagejpeg($im, null, 100);
    $raw = ob_get_clean(); // get

    echo '<div class="map"><img src="data:image/jpeg;base64,'.base64_encode($raw).'" class="img-responsive" alt="Cinque Terre"></div>';
}

This answer is complete for the question and should work for the person asking the question. — Greg Borbonus, Sep 01 '16 at 23:47

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

An <img> tag expects you to supply a filename. Hence you need to save the files and then reference the saved name or your need to embed your image data using something like this:

Embedding Base64 Images

edited May 23 '17 at 10:33

Community

1
1

answered Sep 01 '16 at 22:57

Paul Coldrey

1,389
11
20

You don't need to save any image file to reference it. – Blake Sep 01 '16 at 23:06

score 0 · Answer 3 · answered Sep 01 '16 at 23:01

imagejpeg() returns a boolean according to its docs here: PHP imagejpeg -- Meaning whether it successfully created the image stream or not.

On the display page you can do something like this:

<div class="map">
    <img src="image.php" class="img-responsive" alt="Cinque Terre">
</div>

Create a file called image.php and set this as source:

<?php
  $im = imagecreatetruecolor(320, 80);
  $text_color = imagecolorallocate($im, 255, 255, 255);
  imagestring($im, 20, 20, 5,  "Test App", $text_color);

  header('Content-Type: image/jpeg');

  $img = imagejpeg($im);

  imagedestroy($im);
?>

This will actually treat image.php as an image file. You have to have headers set properly on the output, which your code example won't do. The browser needs to know how to handle data streams.

This is obviously an example of just one image, but you can take it and run with it. — Blake, Sep 01 '16 at 23:07

score 0 · Answer 4 · edited May 23 '17 at 12:10

Maybe it would be better to have two separate PHP files: One which creates the image on-the-fly and returns the data as a JPEG image (say image.php), and another one which renders the HTML code. Then your HTML would contain something like:

<img src="image.php?param1=value1&moreParams">

The other option would be to keep using a single PHP file, and convert the binary JPEG image into a base64 string. This is because the "src" attribute either expects a "normal" URL, or base64-encoded image data. See here: https://stackoverflow.com/a/21606233/4555850

Create and render multiple images on the fly in PHP

4 Answers4