JQUERY/PHP: base64_encoded image data not displaying on CHROME, IE, OPERA

Question

I have images stored in BLOB format in my database. My PHP code can access this BLOB data and return it to client side HTML page in JSON format.

How do I display this data on my HTML page?

I have tried using base64_encode but it works only for Firefox. THIS CODE IS NOT WORKING FOR CHROME, IE, OPERA.

Here is my PHP code:

$json2[] = array("Picture"=>base64_encode($row2[33]));
header("Content-Type: application/json; charset=UTF-8");
header("Content-type:image/jpeg");
echo json_encode($json2);

And this is my JQuery code:

success: function(data){

        var str = JSON.stringify(data);
        var obj = JSON.parse(str);
        $('#pic0').html('<img  height="40" width="40" src="data:image/jpeg;base64,' + obj[0].Picture + '" />');
}

success function is a part of AJAX call. My primary aim is to display this image in Mobile devices since this is a part of WebService Call. From what i have read, it seems base64_encode has some limitations in working for every browser.

How can I display the images on HTML page?

I have checked other posts in SO but unable to find anything fruitful.

`$('where you want to display').html('');` whats not working :? — NullPoiиteя, Jul 01 '15 at 11:34
In your code line, I have changed the second 'data' with my picture data variable. Is that correct? — Kaushal Shah, Jul 01 '15 at 11:41
$('#pic1').html(''); is my html code. $json = array("Picture"=>base64_encode($row2[33])); echo json; is my php code — Kaushal Shah, Jul 01 '15 at 11:46
Show the view-source (Please update your QUESTION, do not just add a comment). Just creating an array does not make JSON - http://stackoverflow.com/questions/11195692/how-to-json-encode-php-array-to-a-json-array-not-as-a-json-object — mplungjan, Jul 01 '15 at 12:15
I have updated the question. Is anything else required? I'm relatively new to SO. — Kaushal Shah, Jul 02 '15 at 06:42

score 0 · Answer 1 · answered Jul 01 '15 at 12:20

These two lines of code:

$json = array(/* anything */);
echo $json;

output the following to your page, verbatim:

Array

You need to echo like this:

header("Content-Type: application/javascript");
echo json_encode($json);

Of course your Javascript frontend must properly parse this JSON string to object you use in Javascript snippet you provided.

score 0 · Answer 2 · answered Jul 01 '15 at 12:21

0

Answering my own question here: As suggested by @NullPoiиteя, the encoded Blob data can be displayed using this code:

$('where you want to display').html('<img src="data:image/png;base64,' + ImageVariable + '" />');

answered Jul 01 '15 at 12:21

Kaushal Shah

129
1
2
9

score 0 · Answer 3 · answered Jul 01 '15 at 12:35

there's no base64_decode in javascript/jQuery?

That's not your problem. It's relatively trivial to write a base64_decode() implementation, however in order to display the data in the browser, you would still need canvas support - and if your browser does not support data URIs then it's unlikely to support canvas.

If it were me, I would use data URIs by default, but add detection in javascript to check for an absence of support, then update the src where data URI support is not available....

function check_img()
{
   var chkimg=document.getElementById("testDataUri");
   if (checkimg.height) {
       return true;
   }
   imgs=document.getElementsByTagName("img");
   for (var i=0; i<imgs.length; i++) {
     if (imgs[i].data && imgs[i].src.match(/data:/i) {
        imgs[i].src=imgs[i].data;
     }
   }
}

(code not tested - just for illustration purposes)

JQUERY/PHP: base64_encoded image data not displaying on CHROME, IE, OPERA

3 Answers3