Javascript 在javascript中显示来自blob的图像

Show image from blob in javascript

提问by vuimran

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,

我正在使用本地存储 html5。首先我将 mysql db 值保存到 localstorage 然后我正在获取我想要的地方。它很好。我想将图像（如产品图像）保存到 localstorage 中，然后想将它们显示在我想要的地方，

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

我做了一个实验，因为我将图像保存在 mysql 中的 blob 中，我能够使用 php 获取和显示它们，但我不想在这里使用 php，目的是离线工作。我无法通过 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.

一个是我们可以在javascript中以某种字符串加密图像（我必须指向图像的路径），然后我可以在任何地方显示它。

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.

第二种方式..正如我所说，我将它保存在 blob 中，我可以使用 javascript 来显示 blob 中的图像。顺便说一下，我可以很容易地从数据库中获取值。现在唯一的事情就是将该值保存到 javascript 中并在我想要的地方显示它的图像。

I will wait for reply thank you:)

我会等待回复谢谢:)

回答by Oded

You can use a Data URI schemefor the images:

您可以Data URI scheme对图像使用 a ：

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

这需要您对数据进行编码，并且在某些浏览器中存在大小限制（例如 IE 中的 32kb）。

回答by Patrick Roberts

You can also use URL.createObjectURL(blob)specified hereand for cross-browser compatibility, check thisout:

你也可以使用URL.createObjectURL(blob)指定的位置，并为跨浏览器的兼容性，检查这出：

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

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