使用 JavaScript 显示 Blob

javascript base64 image blob

2022-08-30 04:06:31

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

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

下面是一个包含所有必需代码（包括 blob）的 jsFiddle。完成的代码应正确显示图像。

答案 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"/>

答案 2

如果您想改用抓取：

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

源：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch