Menggunakan JavaScript untuk menampilkan Blob

96

Saya mengambil gambar Blob dari database, dan saya ingin bisa melihat gambar itu menggunakan JavaScript. Kode berikut menghasilkan ikon gambar rusak di halaman:

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

Berikut adalah jsFiddle yang berisi semua kode yang diperlukan, termasuk blob. Kode lengkap harus menampilkan gambar dengan benar.

javascript image base64 blob GAgnew
sumber
Apa format gumpalan tersebut? Apakah ini gambar dalam beberapa format (jpeg, png, gif dll.) Atau hanya RGB byte?
lahir
5
Bukankah seharusnya itu sebagai document.createElement('img');gantinyadocument.createElement('image');?
Pablo Lozano

Jawaban:

122

Anda juga bisa mendapatkan objek BLOB langsung dari XMLHttpRequest. Menyetel responseType ke blob membuat triknya. Ini kode saya:

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

Dan fungsi responnya terlihat seperti ini:

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

Kami hanya perlu membuat elemen gambar kosong di HTML:

<img id="image"/>
AdamZ
sumber
23
Baris penting adalah urlCreator.createObjectURL(blob)yang mengembalikan imageUrl yang dapat ditetapkan ke gambar src.
Agent47DarkSoul
7
Jangan lupa untuk mencabut URL yang dibuat setelah Anda selesai dengan itu dengan menelepon; revokeObjectURL
Ralpharoo
Saya akan berasumsi, bahwa gambar OP ada dalam beberapa jenis bidang di db, yaitu OP tidak bisa mendapatkannya secara langsung . Jika dia bisa melakukannya, dia kemungkinan besar akan menggunakan img- tag secara langsung daripada melakukan XHR / fetch; karena keduanya rawan SOP.
Christian Ulbrich
78

Jika Anda ingin menggunakan 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;
});

Sumber:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Ogglas
sumber
Akankah ini secara otomatis mengonversi base64 karena gambar dikodekan base64?
P Satish Patro
2
Aku mencintaimu .. Aku menghabiskan 4 jam mencoba menyelesaikannya sampai aku menemukan ini.
tinyCoder
Apa yang terjadiif (typeof URL !== "function") {}
zanderwar
20

Anda dapat mengonversi string Anda menjadi Uint8Array untuk mendapatkan data mentah. Kemudian buat Blob untuk data tersebut dan teruskan ke URL.createObjectURL (blob) untuk mengonversi Blob menjadi URL yang Anda teruskan ke img.src .

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

Anda dapat mencoba contoh lengkapnya di: http://jsfiddle.net/nj82y73d/

nkron
sumber
14

Dalam contoh Anda, Anda harus createElement('img').

Di tautan Anda base64blob != Base64.encode(blob),.

Ini berfungsi, selama data Anda valid http://jsfiddle.net/SXFwP/ (Saya tidak punya gambar BMP jadi saya harus menggunakan PNG).

nachito
sumber
Poin bagus di img. Perlu diperhatikan bahwa 'img' adalah elemen gambar html di mana 'image' adalah elemen input html dari jenis gambar, meskipun dalam hal ini tidak membuat perbedaan. Saya berasumsi bahwa data gambar itu valid, karena berasal dari sumber pihak ketiga. Apakah Anda tahu cara menguji ini? Atau situs mudah yang memberikan gumpalan dari gambar yang diunggah? Saya ingin menguji BMP
GAgnew
"Gumpalan" di biola Anda sebenarnya bukan Blob. Anda menggunakan string berenkode base64.
Elliotwesoff
5

Saya kira Anda mengalami kesalahan dalam kode sebaris gambar Anda. Coba ini :

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);
Luaskan cuplikan

Link yang berguna : http://dean.edwards.name/my/base64-ie.html

marius_neo
sumber
3

Masalahnya adalah saya memiliki data heksadesimal yang perlu dikonversi ke biner sebelum dikodekan base64.

dalam PHP:

base64_encode(pack("H*", $subvalue))
GAgnew
sumber
0

Dalam biola, blob Anda bukanlah blob, melainkan representasi string dari data heksadesimal. Coba ini pada blob dan selesai

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 memberi Anda gambar berenkode base64 yang siap untuk Anda elemen gambar () sumber (src)

Bruno
sumber