如何使用JavaScript显示Blob

Question

我有一个脚本，该脚本从MySQL数据库中获取多个图像，这些图像存储为Blob。 可从JavaScript / Ajax请求访问此脚本。

所以现在我在div中显示blob。 但是，如何在JavaScript中将Blob转换为图像？

Answer 1

首先，您可以在服务器端将图像数据公开为资源，然后使用src设置适当的URL实例化客户端中的图像节点。

<img src="mydomain/images/my-resource.png" />

资源mydomain/images/my-resource.png不必是服务器上的静态资源。 URL只需要在HTTP响应中返回图像数据。

其次，如果您已经在客户端的base64中拥有blob，请使用data-url 。 格式（ 来自Wikipedia ）：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

示例（ 来自Wikpedia ）：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

如果您实际上在客户端具有原始二进制数据，则在构造所述data-url时可能会使用btoa函数 。

最后，您还可以使用HTML5 File API，执行XMLHttpRequest ，将其配置为responseType为'blob'或'arraybuffer' 。 然后，您可以实例化对象的内存中URL ，并将其分配给Image DOM节点的src 。