使用 JavaScript 顯示 Blob

Question

我正在從資料庫中檢索Blob圖像，並且我希望能夠使用JavaScript查看該圖像。以下程式碼在頁面上產生損壞的圖像圖示：varimage=document.createElement('image');image.src='data:image/bmp;base64,'+Base64.encode(blob);document.body.appendChild( image);這是一個jsFiddl

P粉005134685 · Answer

您也可以直接從 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 中建立一個空白圖像元素即可：

P粉742550377 · Answer

問題是我有十六進位數據，需要在進行 Base64 編碼之前轉換為二進位。

在 PHP 中：

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