Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render image with php an output it with the html <img> tag

I have a class with several functions that can render images.

// render.php
class Render {
   public function Render($some_arguments) {
      ...
      header("Content-Type: image/png");
        $im = @imagecreate(110, 20)
            or die("Cannot Initialize new GD image stream");
        $background_color = imagecolorallocate($im, 0, 0, 0);
        $text_color = imagecolorallocate($im, 233, 14, 91);
        imagestring($im, 1, 5, 5,  "A Simple Text String", $text_color);
        imagepng($im);
        return "data:image/png;base64,".base64_encode($im);
   }
}

Then I have my php file that contains the html code and where I would like to output the image within an < img> tag:

// index.php
include("render.php");
$render = new Render();
echo "<htlm><head></head><body>";
echo "<img src=\"".$render->Render(1)."\" />";
echo "</body></html>";

When I run index.php in my browser I just get a blank screen.

Can´t I use a function call as an image source? I know I can use a php file as source, like < img src="render_image.php" />, but then I cannot send any arguments in an object oriented manner (I know I can use $_GET to retrieve arguments), but I would like to do it with a nice object oriented written code.

So, is there any way to use a function call as a source of a html tag?

like image 702
Rox Avatar asked Dec 22 '22 03:12

Rox


2 Answers

You can BASE64 encode the image and use the data url scheme:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

eg.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

So, if you include that instead of the raw image you can do exactly what you want.

(Examples from Wikipediea)

like image 55
hypercrypt Avatar answered Dec 24 '22 01:12

hypercrypt


You'll have to split it:

Render(...) will write a temporary file (with a randomized name), that is accessible from the web for some time.

A new method Output() will return the randomized name mentioned above.

You then call Render() before outputting the HTML and embed the URL using Output().

As an alternative, you could use some file or database to exchange the parameters, essentially some method Prepare(...)? writing the params to the file or database, and Render() reading those and placing the file again etc.

As yet another alternative (without writing to the file system): You could implement include the image data using a data: uri, but the image size will be limited depending on the browser used and you can't cache the data this way (i.e. you have to send it all the time).

Depending on what you're trying to achieve, you might have luck embedding a SVG image as well. This would offer the huge advantage of being in-place while still using less bandwith, being scalable, etc. Downside is, this is only supported in newest browsers (similar to data:) but there are no size restrictions.


Edit: Using the base64/embedded approach it get's a bit more tricky resulting in something like this (untested, but should work):

ob_start(); // buffers future output
imagepng($img); // writes to output/buffer
$b64 = base64_encode(ob_get_contents()); // returns output
ob_end_clean(); // clears buffered output
like image 45
Mario Avatar answered Dec 24 '22 03:12

Mario