12

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:)

vuimran
  • 333
  • 2
  • 3
  • 7

2 Answers2

11

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);
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
  • How do you create that URL object? – Alexis Wilke Mar 10 '14 at 07:36
  • URL should exist in the global scope (i.e. ``window.URL``), but if you're not using a modern web browser it might be vendor specific, so do the following: ``var URL = window.URL || window.webkitURL;`` – Patrick Roberts May 11 '14 at 00:46
  • From this answer I was able to look up the mdn for this specification: https://developer.mozilla.org/en/docs/Web/API/Blob – floor Mar 09 '16 at 18:33
9

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).

Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • @Chris F - No. From the linked article: `Internet Explorer through version 7 (approximately 27% of the market as of July 2010), lacks support.` – Oded Dec 18 '10 at 16:29