在javascript中显示来自blob的图像

Question

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

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

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

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

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

我会等待回复谢谢:)

Answer 1

您还可以使用此处指定的URL.createObjectURL(blob)以及跨浏览器兼容性，请查看以下内容 ：

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

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

Answer 2

您可以为图像使用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）。