Question

I am trying the generate an image on the fly by merging images using PHP GD. I want to know if there is a way I can display the image inside my webpage without the need of storing it somewhere on server.

Like for example I created the following code for merging the images…

function create_image() {
   $main_image = imagecreatefrompng("images/main.png");
   $other_image = imagecreatefrompng("images/other.png");
   imagecopy($main_image, $other_image, 114, 53, 0, 0, 49, 34);
   imagepng($main_image);
   imagedestroy($other_image);
}

Now my html code till now was…

<div class="sidebar-avatar">
   <img src="avatar_pattern.png" class="pattern1" width="430" height="100" />
</div>

How should I call the php function so that it displays the image generated in the div I have designated for it.

Update: I found the use of Content-type: image/png but that would mean I will have to display the image on a separate page not inline.

Answer 1

Convert it to Base64 with base64_encode and echo it as a dataURI in an img tag !

Inline Images with Data URLs