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

Patrick Roberts · Accepted Answer · 2018-04-22 16:55:06Z

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

edited Apr 22, 2018 at 16:55

answered Dec 20, 2012 at 9:29

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

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

3 Comments

Alexis Wilke Over a year ago

How do you create that URL object?

Patrick Roberts Over a year ago

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;

floor Over a year ago

From this answer I was able to look up the mdn for this specification: developer.mozilla.org/en/docs/Web/API/Blob

Oded · Accepted Answer · 2010-12-18 16:19:59Z

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

answered Dec 18, 2010 at 16:19

Oded

501k102 gold badges900 silver badges1k bronze badges

1 Comment

Oded Over a year ago

@Chris F - No. From the linked article: Internet Explorer through version 7 (approximately 27% of the market as of July 2010), lacks support.

Collectives™ on Stack Overflow

Show image from blob in javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related