使用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"/>

Answer 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

Answer 3

在你的例子中,你应该createElement('img').

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

这是有效的,只要您的数据有效http://jsfiddle.net/SXFwP/(我没有任何BMP图像,所以我不得不使用PNG).

Answer 4

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

Answer 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

Answer 6

在小提琴中，您的 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)

Answer 7

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

在 PHP 中：

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