使用 JavaScript 从 Blob 中显示图像

Question

我正在使用本地存储 HTML5。首先，我将 MySQL 数据库的值保存到本地存储中，然后在需要时进行提取。这很好。现在我想将图像（例如产品图像）保存到本地存储中，然后在需要时显示它们。

我做了一个实验，将图片保存为 MySQL 中的 blob，并且能够使用 PHP 提取和显示它们，但我不想在这里使用 PHP，目的是离线工作。我无法通过 JavaScript 显示图像。

有两种方法：

第一种方法，我们可以在 JavaScript 中加密图像（我已经知道图像的路径），并在任何地方显示它。

第二种方法，我将其保存在 Blob 中。我能够轻松从数据库中提取值。现在唯一的问题是将该值保存到 JavaScript 中，并在需要时显示其图像。

等待您的回复，谢谢。

- vuimran

Answer 1

您还可以使用在这里指定的URL.createObjectURL(blob)，并且为了跨浏览器兼容性，请检查这个：

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

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

- Patrick Roberts

---

你如何创建URL对象？ - Alexis Wilke

URL应该存在于全局范围内（即“window.URL”），但如果您不使用现代Web浏览器，则可能是供应商特定的，因此请执行以下操作：“var URL = window.URL || window.webkitURL;” - Patrick Roberts

从这个答案中，我能够查找此规范的 mdn：https://developer.mozilla.org/en/docs/Web/API/Blob - floor

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）。

- Oded

---

@Chris F - 不行。根据链接的文章：截至2010年7月，版本为7及以下的Internet Explorer（约占市场份额的27%）不支持该功能。 - Oded