在javascript中显示来自blob的图像

Question

我正在使用localstorage html5.首先,我将mysql数据库值保存到localstorage然后我提取我想要的地方.很好.我想将图像(如产品图像)保存到本地存储中,然后想要将它们显示在我想要的位置,

我做了一个实验,因为我在blob中保存图像在mysql中,我能够使用PHP获取和显示它们但我不想在这里使用PHP,目的是离线working.i无法通过javascript显示图像

任何人都可以帮助我？可能有两种方式,

一个是我们可以用javascript中的某种字符串来识别图像(我必须路径到图像),然后我可以在任何地方显示它.

第二种方式..正如我说我保存在blob中我可以使用javascript来显示blob中的图像.顺便说一句,我可以轻松地从数据库中获取价值.现在唯一的办法是将该值保存到javascript中并将其图像显示在我想要的位置.

我会等待回复谢谢:)

Answer 1

您可以使用a Data URI scheme作为图像:

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

这需要您对数据进行编码,并且某些浏览器的大小有限(例如,IE中为32kb).

Answer 2

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

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

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