Jump to content

Help with Displaying a BASE64 image


AmbientGuitar
 Share

Recommended Posts

I have tried several things to get this working. I am getting a black screen with a white dot.  Not sure what I'm doing wrong. Apparently it should be a red dot. I want to get this working first as I have BASE64 to display from a table in the database.By teh way I am fairly new to PHP so  please go easy!

<?php
// Define the Base64 value you need to save as an image
header ('Content-Type: image/png');
$b64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
// Obtain the original content (usually binary data)
$bin = base64_decode($b64);

// Load GD resource from binary data
$im = imageCreateFromString($bin);
//echo $im;
// Make sure that the GD library was able to load the image
// This is important, because you should not miss corrupted or unsupported images
if (!$im) {
  die('Base64 value is not a valid image');
}

// Specify the location where you want to save the image

//;
echo '<img src="data:image;base64, ' .$im. ' " style="width:5in;height:5in;">';
//echo '<img src="data:image/jpeg;base64,data:image/jpeg;base64,$b64>")';
//echo '<img src= ' .$bin. '/>';
//print("<img src= $im 'height: 200px; width: 350px;'>");
//$img_file = '/img/filename.png';

// Save the GD resource as PNG in the best possible quality (no compression)
// This will strip any metadata or invalid contents (including, the PHP backdoor)
// To block any possible exploits, consider increasing the compression level
//imagepng($im, $img_file, 0);

?>

 

Link to comment
Share on other sites

Programming is not like cooking, where you can throw a bunch of things into a pot and get a delicious gumbo. Programming is like painting: the canvas may vary and what you're trying to draw will be different each day, but you need to work with the paints in a certain way, and if you try to throw them together then all you're going to be able to paint is "Brown Rock In Puddle of Mud". If you want red then you use red, and if you want yellow then you use yellow, and if you want some shade of orange then you mix red and yellow together in very precise, calculated, and controlled proportions.

You've got a lot of things going on here and only a small fraction of them are going to be appropriate, let alone useful, to your end goal. It's complicated enough that I'm not even entirely sure what your end goal is supposed to be (other than "you want a red dot").

So let's start at the beginning - or perhaps a little bit on this side of it.

You have a database, but let's pretend you already got what you need from it and now have that $b64 variable. In as technical terms as you know, what do you need to do with it? Do you need to output an <img> into your HTML that will show this image? Or do you already have the <img> and you need a script that you can reference to show the image?
And I'll skip ahead a bit and ask: in the general case, are these images going to be small and simple, or potentially large and detailed? Judging by the fact that you're talking about JPEGs that are 5"x5", I'm thinking the latter. We'll come back to that later.

  • Great Answer 1
Link to comment
Share on other sites

Please use code tags <>.

Basically you need to make up your mind as to what this script is intended to do:

  • Return the data for an image, so that it can be referenced as the source in an image tag.
  • Return Some html

The problem you have right now is that you are setting the header, as if you wanted to return image data

 

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

 

Then you return some html, which includes an img tag and an embedded base64 image.

echo '<img src="data:image;base64, ' .$im. '" style="width:5in;height:5in;">';

 

So, if you want to return the data and reference the script in an <img src="..."> tag, then you would continue to use the header (as long as your image is actually going to be a .png) and just return the image data.  Often this is what people want to do, when creating an image on the fly in the server.

In your case, you started with some base64 data, that is perhaps an image.  If so, then all your existing code would need is this

 

// header ('Content-Type: image/png');  --NO! You are returning HTML not image data
$b64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
echo '<img src="data:image/png;base64, ' . $b64  . '" style="width:5in;height:5in;">';

Amongst the several confusing mistakes you are making currently, you read data into a GD OBJECT.  Then you try and return that object in a place where you need base64 encoded data.  If you are going to use a function, you need to actually take 30 seconds and look up the function and at minimum:

  • Check the number and types of the parameters
  • Check what the function returns

I'm going to assume here that there is some reason you want to read image data into GD.  In this case, you commented out all the code that you would need to actually have this function.  At minimum it would be more like this:

 

// header ('Content-Type: image/png');  --NO! You are returning HTML not image data
$b64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
$bin = base64_decode($b64);

// Load GD resource from binary data
$im = imageCreateFromString($bin);
if (!$im) {
  die('Base64 value is not a valid image');
}

echo '<img src="data:image/png;base64, ' . base64_encode(imagepng($im)) . '" style="width:5in;height:5in;">';

 

This is unsophisticated code, because it has the baked in assumption that your original source is the base64 encoded version of a .png image.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.