Show Image From Blob In Javascript

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 lo

Solution 1:

You can use a Data URI scheme for the images:

<imgsrc="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).

Solution 2:

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

var uri = URL.createObjectURL(blob);
var img = newImage();

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