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

您可以將字符串轉換為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 4

在您的示例中，您應該createElement('img') 。

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

只要您的數據有效http://jsfiddle.net/SXFwP/ （我沒有任何 BMP 圖像，所以我不得不使用 PNG），這就有效。

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

問題是我有十六進制數據需要在 base64encoded 之前轉換為二進制。

在 PHP 中：

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

Answer 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 編碼的圖像，為您准備好圖像元素 () 源 (src)

Answer 8

我也嘗試在我的網站上給出答案： http : //bharatbaba.com/how-to-display-blob-image-in-html-using-javascript-and-php.htm