使用 JavaScript 显示 Blob

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

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

下面是一个 jsFiddle ，它包含了所有需要的代码，包括 blob。

415442 次浏览
小开

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

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

这个工作，只要你的数据是有效的 http://jsfiddle.net/SXFwP/(我没有任何 BMP 图像，所以我必须使用 PNG)。

小开

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

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

小开
最佳答案

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

在 PHP 中:

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

您可以将字符串转换为 Uint8Array以获得原始数据。然后为该数据创建一个 团团，并传递给 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/上尝试完整的示例

小开

您也可以直接从 XMLHttpRequest 获取 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"/>
小开

如果你想使用提取代替:

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

小开

在小提琴中，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 为图像元素()源(src)提供一个 base64编码的图像


提交答案