使用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) {

   var urlCreator = window.URL || window.webkitURL;

   var imageUrl = urlCreator.createObjectURL(this.response);

   document.querySelector("#image").src = imageUrl;

}

我们只需要在HTML中创建一个空的图像元素：

<img id="image"/>