使用JavaScript显示Blob


88

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

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

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


Blob的格式是什么?这是某种格式(jpeg,png,gif等)还是RGB字节的图像?
2011年

4
应该document.createElement('img');代替它document.createElement('image');?

Answers:


114

您也可以直接从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"/>

22
重要的一行是,urlCreator.createObjectURL(blob)它返回可以分配给图像src的imageUrl。
Agent47DarkSoul 2016年

7
完成调用后,不要忘记撤消创建的URL。revokeObjectURL
Ralpharoo

我假设OP的映像位于db中的某种字段,即OP无法直接获取它。如果他能够做到,那么他很可能直接使用img-标签而不是XHR / fetch;因为两者都容易发生SOP。
Christian Ulbrich

75

如果要改为使用提取:

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/zh-CN/docs/Web/API/Fetch_API/Using_Fetch


当图像经过base64编码时,这会自动转换base64吗?
P Satish Patro

2
我爱你..我花了4个小时试图解决,直到找到了。
tinyCoder

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

19

您可以将字符串转换为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/


14

在您的示例中,您应该createElement('img')

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

只要您的数据是有效的http://jsfiddle.net/SXFwP/(我没有任何BMP图像,所以我必须使用PNG),此方法就可以使用。


关于img的要点。您应该注意,“ img”是一个html图像元素,其中“ image”是一个image类型的html输入元素,尽管在这种情况下它没有什么区别。我假设图像数据有效的,因为它来自第三方来源。你知道测试吗?还是一个简单的网站,可以从上传的图片中获取Blob?我想测试BMP
GAgnew 2011年

小提琴中的“斑点”实际上不是斑点。您使用了base64编码的字符串。
elliotwesoff

5

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

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

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


3

问题是我有十六进制数据,需要先进行十六进制数据转换,然后才能进行base64编码。

在PHP中:

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

0

在小提琴中,您的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编码图像,可以用于图像元素()源(src)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.