使用JavaScript显示Blob

Question

我正在从数据库中检索Blob图像，并且希望能够使用JavaScript查看该图像。以下代码在页面上产生一个损坏的图像图标：

var image = document.createElement('image');

    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);

    document.body.appendChild(image);

这是一个jsFiddle，其中包含所有必需的代码，包括blob。完成的代码应正确显示图像。

Answer 1

您也可以直接从XMLHttpRequest获取BLOB对象。将responseType设置为blob可以解决问题。这是我的代码：var xhr = new XMLHttpRequest();xhr.open("GET", "http://localhost/image.jpg");xhr.responseType = "blob";xhr.onload = response;xhr.send();响应函数如下所示：function response(e) {&nbsp; &nbsp;var urlCreator = window.URL || window.webkitURL;&nbsp; &nbsp;var imageUrl = urlCreator.createObjectURL(this.response);&nbsp; &nbsp;document.querySelector("#image").src = imageUrl;}我们只需要在HTML中创建一个空的图像元素：<img id="image"/>