CODEWITHSUNDEEP
javascriptimageblob
BurninatorDor
BurninatorDor

Reputation: 1117

Display Blob data retrieved from MySQL Database using JavaScript

Using a web service, I was able to retrieve some data from a MySQL Database. The database has an image saved in it, which had the file type of BLOB. This is what my web service returns when it comes to the image:

<image>
/9j/4AAQSkZJRgABAQEAYABgAAD/7TaeUGhvd.....RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z
</image>

Now I am having trouble making my JavaScript application convert this data and then display it as an image. I researched on it a bit and found a couple of tutorials online but somehow they did not work for me....can anyone please help me with this issue? What is the simplest way I can convert BLOB data to an image? Thanks in advance!

Upvotes: 1

Views: 5606

Answers (1)

Anurag Uniyal
Anurag Uniyal

Reputation: 88865

Assuming the blob has base64 encoded PNG data, you can use data-uri to set data directly to image e.g.

var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

$('#myimg').attr('src', "data:image/png;base64,"+imgdata)

Assumption here is that data returned from server is base64 encoded, but if that is not the case you can see various options but ultimately you may have to do proper conversion in server side, in that case why not just return the url to image and create a API on server side to return images from blob

Here is a jsfiddle in action http://jsfiddle.net/anuraguniyal/4DEtH/5/

Edit: I am not sure what language you use server side but process will be same for each language e.g.

>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

i.e. take all data, as will be stored in file (not the png marker too), not just raw image data and encode it

Upvotes: 1

Related Questions