Paparkan gumpalan menggunakan JavaScript

Question

Saya sedang mendapatkan semula imej Blob daripada pangkalan data dan saya mahu dapat melihat imej itu menggunakan JavaScript. Kod berikut menghasilkan ikon imej yang rosak pada halaman:

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

Berikut ialah jsFiddle yang mengandungi semua kod yang diperlukan, termasuk gumpalan. Kod yang lengkap hendaklah memaparkan imej dengan betul.

Answer 1

Anda juga boleh mendapatkan objek BLOB terus daripada XMLHttpRequest. Hanya tetapkan responseType kepada gumpalan. Ini kod saya:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

Fungsi tindak balas kelihatan seperti ini:

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

Kami hanya mencipta elemen imej kosong dalam HTML:

<img id="image"/>

Answer 2

Masalahnya ialah saya mempunyai data heksadesimal yang perlu ditukar kepada binari sebelum pengekodan Base64.

Dalam PHP:

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