如何使用JavaScript显示blob

Question

我有一个脚本，它从我的MySQL数据库中获取了几个图像，这些图像存储为blob。可以从JavaScript / Ajax请求访问此脚本。

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

Answer 1

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

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

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

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

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

示例（from Wikpedia）：

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

如果您在客户端实际拥有原始二进制数据，那么构建所述data-url时btoa function可能会有用。

最后，您还可以使用HTML5文件API，执行XMLHttpRequest，配置响应类型为'blob'或'arraybuffer'。然后，您可以为对象实例化an in-memory URL，并将其分配给src DOM节点的Image。