Showing image binary data using javascript

Question

I am trying to get the image stored in db as json and diplay the image using javascipt. but not able to view the image. i tried fire bug to view the html code img src is showing null.

here is my php code to get the data from db table:

<?php
header('Content-type: application/json');

include 'connect.php';

$b_id=$_GET['b_id'];
$c_id=$_GET['c_id'];

$sql_select=mysql_query("SELECT * FROM business_directory WHERE business_category_id=$b_id") or die(mysql_error());

$records = array();

if(mysql_num_rows($sql_select)>0){

while($row=mysql_fetch_array($sql_select)){
    $records[] = $row;  
}
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
}else{

    echo 'data not selected';
}
?>

Here is javascript code:

function get_business(){

$.ajax({
        url:'http://localhost/ajax_practice/php/get_business.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,

        success:function(data){
            $.each(data, function(i,item){
                var output="";
                    $(".gallery").append(output);

                        output+="<li>";

                        output+="<a href='category.html?b_id="+item.id+"' data-transition='slide' rel='external'>";
                        output+="<img src='"+item.business_icon+"'/>";
                        output+="<span>"+item.business_name+"</span";
                        output+="</a>";
                        output+="</li>";
                    $(".gallery").append(output);


            });
        }
    });

}

Can onyone help me that how can i get the data from database and show it using javascript.

You can't just put an img src at binary data (assuming that's what item.business_icon is). You will need to convert the data to an image somehow. Options may be, writing the image server side and setting the url of that image to the src of the image tag, or using canvas perhaps with the data url functions. — dougajmcdonald
– dougajmcdonald, Commented Jun 8, 2013 at 6:22
i don't want to use server side scripting, i want show it using javascript only — Sheeshkamal Vishwakarma
– Sheeshkamal Vishwakarma, Commented Jun 8, 2013 at 6:25
I just checked my json output and i found business_icon as null — Sheeshkamal Vishwakarma
– Sheeshkamal Vishwakarma, Commented Jun 8, 2013 at 6:25
Yup that will do it! :P We need to know what format your business_icon is, to provide the correct answer. How have you stored it? — dougajmcdonald
– dougajmcdonald, Commented Jun 8, 2013 at 7:55

SaminatorM · Accepted Answer · 2013-06-08 06:56:33Z

1

You can't send it in binary format with json, so you can encode it as base64 string and send it as string. In client side you can use

<img src="data:image/jpg;base64,base64Data" />

base64Data - base64 string coming from the server

You can see more info,

Showing image data using javascript

answered Jun 8, 2013 at 6:56

SaminatorM

6305 silver badges18 bronze badges

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

1 Comment

SaminatorM Over a year ago

No, you can save it directly as binary or can convert it to base64 string and then can save it to database. But, base64 strings are very large strings, So, best way to save it binary. When you send it to client you can encode it as base64.

jcubic · Accepted Answer · 2013-06-08 06:22:21Z

0

You need to encode your image as base64 and use data url data:image/png;base64,<DATA>

https://en.wikipedia.org/wiki/Data_URI_scheme

answered Jun 8, 2013 at 6:22

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

3 Comments

Sheeshkamal Vishwakarma Over a year ago

m getting image as null in json only

Sheeshkamal Vishwakarma Over a year ago

I just checked my json output and i found business_icon as null

jcubic Over a year ago

@SheeshkamalVishwakarma try use base64_encode function in php $row['business_icon'] = base64_encode($row['business_icon']) in while loop.

user568109 · Accepted Answer · 2013-06-08 06:55:56Z

0

I am not sure what is the format of image stored in database. You say it is stored as json.

If it is base64 already, try this

output+="<img src='data:image/png;base64,"+item.business_icon+"'/>";

or if it is binary(raw image), try this

output+="<img src='data:image/png;base64,"+atob(item.business_icon)+"'/>";

To know what format it is just output item.business_icon on console if has strange characters, then it is binary form.

answered Jun 8, 2013 at 6:55

user568109

48.1k18 gold badges101 silver badges124 bronze badges

Comments

Enamul Haque · Accepted Answer · 2019-05-28 18:00:06Z

0

You can use

output +="<img style='width: 30px; width:50px;' src='data:image/png;base64,"+item.business_icon+"' />";

answered May 28, 2019 at 18:00

Enamul Haque

5,0952 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

Showing image binary data using javascript

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related