Display PNG with raw image data within an html document using PHP

Question

With this code, I am trying to create an image of a signature from JSON and then display the image directly in the browser without saving it. The problem I have is I want to display this image within a HTML document so the header information has already been modified. Is there a way to display an image from it's raw image data within an HTML document? Or any other way around this issue?

$json = $ticket->sig; // get the json representing the signature
$img = sigJsonToImage($json);  //get image resource from json

    // HERE I WANT TO DISPLAY THE IMAGE BUT GET Cannot modify header information
header('Content-Type: image/png');
imagepng($img, null, 0, PNG_NO_FILTER);
imagedestroy($img);

There is a drawing pad in the app that is used to draw a signature. This signature is saved as JSON in a database — Robert
– Robert, Commented May 16, 2014 at 18:39

Community · Accepted Answer · 2023-11-17 20:38:18Z

11

Sure, you can use two things together for this.

The HTML Image tag supports base64 encoded image. It can be big for html, but will work. Also you can output image to buffer using ob_start and ob_end functions. See https://www.php.net/manual/pt_BR/function.ob-start.php

So for PHP file you can do:

$json = $ticket->sig; // get the json representing the signature
$img = sigJsonToImage($json);  //get image resource from json

ob_start(); // Start buffering the output
imagepng($img, null, 0, PNG_NO_FILTER);
$b64 = base64_encode(ob_get_contents()); // Get what we've just outputted and base64 it
imagedestroy($img);
ob_end_clean();

// Print the HTML tag with the image embedded
echo '<img src="data:image/png;base64,'.$b64.'"/>';

This will make a HTML Img tag with the embedded image. Hope is this what you want.

PS: Keep in mind that this will increase the loading time for your HTML data, since browser opens another thread for downloading the image if you just link it.

edited Nov 17, 2023 at 20:38

CommunityBot

11 silver badge

answered May 16, 2014 at 18:46

Lucas Teske

6729 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Over a year ago

beautiful. This is exactly what I am looking for. I will note that Orion's answer worked, but I am also converting the html to pdf and it did not work for that part of the app.

Lewis · Accepted Answer · 2014-05-16 18:40:27Z

2

You can try this

<img src="/path/to/yourimage.php">

In yourimage.php.

$json = $ticket->sig; // get the json representing the signature
$img = sigJsonToImage($json);  //get image resource from json

    // HERE I WANT TO DISPLAY THE IMAGE BUT GET Cannot modify header information
header('Content-Type: image/png');
imagepng($img, null, 0, PNG_NO_FILTER);
imagedestroy($img);

answered May 16, 2014 at 18:40

Lewis

15k14 gold badges70 silver badges88 bronze badges

Collectives™ on Stack Overflow

Display PNG with raw image data within an html document using PHP

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related