Zeigen Sie Blobs mit JavaScript an

Question

Ich rufe ein Blob-Bild aus einer Datenbank ab und möchte das Bild mit JavaScript anzeigen können. Der folgende Code erzeugt ein defektes Bildsymbol auf der Seite:

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

Hier ist eine jsFiddle, die den gesamten benötigten Code enthält, einschließlich des Blobs. Der fertige Code sollte das Bild korrekt anzeigen.

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))