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

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

在 PHP 中：

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