使用 JavaScript 显示 Blob

Posted 2023-03-15

【中文标题】使用 JavaScript 显示 Blob

【英文标题】：Using JavaScript to display a Blob

【发布时间】：2011-11-30 19:46:42

【问题描述】：

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

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

Here is a jsFiddle 包含所需的所有代码，包括 blob。完成的代码应该可以正确显示图像。

【问题讨论】：

blob 的格式是什么？这是某种格式的图像（jpeg、png、gif 等）还是只是 RGB 字节？

不应该是document.createElement('img');而不是document.createElement('image');?

【参考方案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"/>

【讨论】：

重要的一行是urlCreator.createObjectURL(blob)，它返回一个可以分配给图像src的imageUrl。

一旦你完成了调用，别忘了撤销创建的 URL； revokeObjectURL

我假设 OP 的图像位于数据库中的某种字段 in 中，即 OP 无法直接获取它。如果他能够这样做，他很可能会使用img - 标签直接，而不是执行XHR / fetch；因为两者都容易出现 SOP。

【参考方案2】：

如果你想使用 fetch 代替：

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

【讨论】：

这会自动转换base64，因为图像是base64编码的吗？

我爱你.. 我花了 4 个小时试图解决，直到我找到这个。

发生了什么if (typeof URL !== "function")

如果您投反对票，请添加评论原因。否则很难改进答案。

【参考方案3】：

您可以将字符串转换为Uint8Array 以获取原始数据。然后为该数据创建一个 Blob 并传递给 URL.createObjectURL(blob) 以将 Blob 转换为您传递给 img.src 的 URL。

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) 
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);


// Make a Blob from the bytes
var blob = new Blob([bytes], type: 'image/bmp');

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

您可以尝试完整的示例：http://jsfiddle.net/nj82y73d/

【参考方案4】：

在你的例子中，你应该createElement('img')。

在您的链接中，base64blob != Base64.encode(blob)。

只要您的数据有效http://jsfiddle.net/SXFwP/（我没有任何 BMP 图像，所以我不得不使用 PNG），这将有效。

【讨论】：

关于img的好点。您应该注意，'img' 是一个 html 图像元素，其中 'image' 是图像类型的 html 输入元素，尽管在这种情况下它没有任何区别。我假设图像数据 is 有效，因为它来自第 3 方来源。无论如何你知道测试这个吗？还是一个简单的网站，可以从上传的图像中提供 blob？我想测试 BMP 的

小提琴中的“blob”实际上并不是一个 Blob。您使用了 base64 编码的字符串。

【参考方案5】：

我猜您的图片的内联代码中有错误。 试试这个：

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.;
    
document.body.appendChild(image);

有用的链接：http://dean.edwards.name/my/base64-ie.html

【参考方案6】：

问题是我有十六进制数据需要在进行 base64 编码之前转换为二进制。

在 php 中：

base64_encode(pack("H*", $subvalue))

【参考方案7】：

在小提琴中，您的 blob 不是 blob，它是十六进制数据的字符串表示形式。 在 blob 上试试这个，你就完成了

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
)
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL 给你一个 base64 编码的图像，为你准备好 image element () source (src)

【参考方案8】：

我也尝试在我的网站上给出答案： http://bharatbaba.com/how-to-display-blob-image-in-html-using-javascript-and-php.htm