Show image from blob in javascript

Question

i am using localstorage html5. first i am saving mysql db values into localstorage then i am fetching where i want.its fine. i want to save images (like images of products) into localstorage and then want to show them where i want,

i did an experiment as I saved images in blob in mysql, and i am able to fetch and show them using php but i dont want to use php here,the purpose is of offline working.i am unable to show image via javascript

any one can help me?? There might be two ways,

one is can we encript image (i have to path to image)in some sort of string in javascript and then can i show that on anywhere.

Second way.. as i said i saved it in blob can i use javascript to just show image from blob. by the way i can fectch value from database easily.now the only thing is to save that value into javascript and show its image where i want.

I will wait for reply thank you:)

Answer 1

You can also use URL.createObjectURL(blob) specified here and for cross-browser compatibility, check this out:

var uri = URL.createObjectURL(blob);
var img = new Image();

img.src = uri;
document.body.appendChild(img);

Answer 2

You can use a Data URI scheme for the images:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

This requires you to encode the data and there is a limit to the size in some browsers (32kb in IE, for example).