multipart images on page

[ginerjm]

Ok - trying to use some new little software I got from a fellow poster. Want to display some html output as well as the image produced by the new code. No Can Do.

 

Did some reading on doing multipart content type headers and here is what I am trying:

 

if ($btn == 'Make Barcode' )
{
	$sample = $_POST['sample'];
	$bar_image = MakeBarcode($sample);
?>
Content-Type: multipart/mixed; boundary="simple boundary"

--simple boundary
Content-Type: image/png;
<?php
imagepng($bar_image);
?>


--simple boundary

Content-Type: text/html;
<br><br>
Go Back to tester
<a href='barcode_tester.php'>Click here</a>
<br>

--simple boundary

<?php

imagedestroy($bar_image);
exit();
}

This what I am getting:

Content-Type: multipart/mixed; boundary="simple boundary" --simple boundary Content-Type: image/png; ‰PNG  IHDRc£Ò¯PLTEÿÿÿ¥ÙŸÝIDAT•cøºÚß9?Õ¶õr—ý†Q”µŠ5½Ó7ÕIEND®B`‚ --simple boundary Content-Type: text/html; 

 Go Back to tester Click here 
 --simple boundary 

I'm hoping that some "header" expert can point out my mistake. OR - tell me I can't do this thing.

[QuickOldCar]

Can't output anything along with gd image display.

 

Pass a value with get to gd script with no additional html output and iframe it.

 

Better off saving images a folder and then linking to them as files.

imagepng($image, "/images/".$image_name.".png");

[Jacques1]

A multipart response in the browser sounds like a very obscure approach. They do work in some browsers in some special cases (like attachments), but how do you even expect this to be rendered?

 

Since the images are probably very small, you could embed them in an img tag with a data source:

<img src="data:image/png;base64,<?= base64_encode($bar_image) ?>" alt="barcode">

Or use a separate script as suggested by QuickOldCar.

 

If you insist on multipart messages, and if you've found a browser which can actually display them reasonable, there are some issues in your code:

• You need to send the first Content-Type header with the header() function. Otherwise you get plain old text/html.
• You're missing the terminating delimiter (with a double dash at the end).
• You're missing the blank line after the part headers.
• There are trailing spaces after your image data.

Edited February 15, 2016 by Jacques1

[ginerjm]

The multi part thing was just the first thing I thought I had to try. Seems like it is not necessary.

 

I like the file idea - will have to try that, as well as using an iframe - have never done that.

 

Jacques - what does the base64 encoding do to make the display possible?

[ginerjm]

Ok - the base64 thing in the img tag is giving me a problem. The barcode image is just that and the basse64 function is expecting a string. What am I doing wrong?

[Jacques1]

Appearently the only way to get the PNG data from a GD resource is to write it the output buffer and then read the content into a variable:

<?php

ob_start();
imagepng($bar_image);
$bar_image_png = ob_get_clean();

Edited February 16, 2016 by Jacques1

[ginerjm]

That didn't give me anything at all. No errors; no image.

 

To clarify for those still following:

I have created a barcode via a function that someone gave me. The output of that function is meant to be output with the following:

 

imagepng($image)

 

I am returning the $image var from the function and attempting to output it to my web page results but failing to get an image unless it is the only thing on the output page AND I use a header call to set the content-type to image/png.

 

The process is:

$bar_image = MakeBarcode($sample); // a function that does indeed make a bar code image
ob_start();
imagepng($bar_image);
$bar_image_png = ob_get_clean();

 

Actually I do get one bit of output - the undefined little icon.

[Jacques1]

Just to make sure we're on the same page:

 

You're saying this shows the image:

<?php

$sample = '...';
$bar_gd_image = MakeBarcode($sample);

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

imagepng($bar_gd_image);

But this doesn't:?

<?php

$sample = '...';
$bar_gd_image = MakeBarcode($sample);

ob_start();
imagepng($bar_gd_image);
$bar_image_png = ob_get_clean();

?>
<img src="data:image/png;base64,<?= base64_encode($bar_image_png) ?>" alt="barcode">

[ginerjm]

Here is what I am doing since I hate using php tags in code midstream:

$sample = $_POST['sample'];
$bar_image = MakeBarcode($sample);

ob_start();
imagepng($bar_image);
$bar_image_png = ob_get_clean();
$bar_image64 = base64_encode($bar_image);

 

Then my html looks like:

<img src="data:image/png;base64,$bar_image64" alt="$sample">

 

Results:

Where the img s/b I get the little icon of an undefined(?) image. Also I get this error:

 

Warning: base64_encode() expects parameter 1 to be string, resource given in /home/albany/public_html/homejg/jg/barcode_tester.php on line 74

 

Where line 74 is the call to base64_encode.

[ginerjm]

PS - the barcode function clearly does work since this code works:

$sample = $_POST['sample'];
$bar_image = MakeBarcode($sample);
header ('Content-type: image/png');
imagepng($bar_image);
imagedestroy($bar_image);
exit;

[Jacques1]

You need to pass $bar_image_png to base64_encode(), not the GD resource $bar_image.

 

When in doubt, try my minimal example above. You can still change the coding style afterwards.

[ginerjm]

$bar_image_png is just one of several names I used in my code. As it stands the bar code maker function produces a result that works just fine in my last post. All I am doing is returning that variable and then trying to output it using your latest suggested solution. I have no 'png' named version - there is no other result. If the var I am using is a GD resource so be it. But it works for the imagepng() call so it must be a resource for it. So - apparently there is no other way to output the barcode image?

[Jacques1]

OK, again:

 

Your MakeBarcode() function returns the barcode image as a GD resource. If you want to embed this image into your page, you need to turn the GD resource into a Base64-encoded string of the PNG data. The only way to do that is to start an output buffer, save the buffer content into a variable and then Base64-encode this(!) variable:

// I assume that $bar_image is the GD resource returned by MakeBarcode()

ob_start();
imagepng($bar_image);
$png_data_of_bar_image = ob_get_clean();    // fetch the content of the output buffer into a variable
$bar_image64 = base64_encode($png_data_of_bar_image);

I've verified this with different GD resources, so it definitely works. If it's somehow too difficult to implement, I suggest you go with a separate script which serves one barcode image at a time.

Edited February 16, 2016 by Jacques1

[ginerjm]

Thank you Jacques1 for staying with me while I struggled to see the nose on my face! Apparently when I tried to follow your guidance I used the wrong variable since this time it worked perfectly.

 

Do you have a resource for the syntax of the <img> tag using that data: attribute? Haven't been able to locate one.

[Jacques1]

Apparently when I tried to follow your guidance I used the wrong variable since this time it worked perfectly.

 

Cool.

 

 

 

Do you have a resource for the syntax of the <img> tag using that data: attribute? Haven't been able to locate one.

 

 

The MDN has a lot of infos about data URIs:

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs