在 javascript 中显示来自 blob 的图像答案

【问题标题】：Show image from blob in javascript在 javascript 中显示来自 blob 的图像
【发布时间】：2011-05-27 14:30:09
【问题描述】：

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

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

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

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

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

我会等待回复谢谢你:)

【问题讨论】：

标签： javascript blob

【解决方案1】：

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

【讨论】：

@Chris F - 否。来自链接文章：Internet Explorer through version 7 (approximately 27% of the market as of July 2010), lacks support.

【解决方案2】：

您也可以使用URL.createObjectURL(blob) 指定here 并且为了跨浏览器兼容性，请检查this out：

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

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

【讨论】：

如何创建该 URL 对象？
URL 应该存在于全局范围内（即window.URL），但如果您使用的不是现代网络浏览器，它可能是特定于供应商的，因此请执行以下操作：var URL = window.URL || window.webkitURL;
从这个答案中我可以找到这个规范的 mdn：developer.mozilla.org/en/docs/Web/API/Blob