在 javascript 中显示 blob 中的图像

Question

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

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

您可以对图像使用数据URI方案：

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

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