問(wèn)題描述

var xhr = new XMLHttpRequest();xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true);xhr.responseType = 'arraybuffer';xhr.onload = 函數(shù)(e){如果(this.status == 200){var uInt8Array = new Uint8Array(this.response);var byte3 = uInt8Array[4];var bb = new WebKitBlobBuilder();bb.append(xhr.response);var blob = bb.getBlob('image/png');var base64 = window.btoa(blob);警報(bào)(base64)；}};xhr.send();

基本上，我在這里要做的是檢索圖像，并將其轉(zhuǎn)換為 base64.

從這里的評(píng)論中閱讀，它指出:

當(dāng)然.在獲取資源作為 ArrayBuffer 后，從它.一旦你有了它，你可以直接對(duì)文件/blob進(jìn)行base64編碼window.btoa() 或 FileReader.readAsDataURL()."

但是，blob 只是 [object blob]，而我需要從圖像中獲取二進(jìn)制文件，以便將其轉(zhuǎn)換為 base64 并在 img 中顯示使用數(shù)據(jù)標(biāo)記.

有人知道如何實(shí)現(xiàn)嗎?

提前謝謝你！

不要在 Chrome 中使用 BlobBuilder(在 OSX Chrome、Firefox 12、Safari 6、iOS Chrome、iOS Safari 中測(cè)試):

ex1:http://jsfiddle.net/malraux/xGUsu/(原理)p>

ex2:http://jsfiddle.net/xGUsu/78/(使用完整示例)

var xhr = new XMLHttpRequest();xhr.open('GET', 'doodle.png', true);xhr.responseType = 'arraybuffer';//當(dāng)請(qǐng)求準(zhǔn)備好時(shí)處理響應(yīng).xhr.onload = 函數(shù)(e){如果(this.status == 200){//從返回的數(shù)據(jù)創(chuàng)建一個(gè)二進(jìn)制字符串，然后將其編碼為數(shù)據(jù) URL.var uInt8Array = new Uint8Array(this.response);var i = uInt8Array.length;var binaryString = new Array(i);當(dāng)我 - ){binaryString[i] = String.fromCharCode(uInt8Array[i]);}var data = binaryString.join('');var base64 = window.btoa(數(shù)據(jù));document.getElementById("myImage").src="data:image/png;base64," + base64;}};xhr.send();

注意:這段代碼現(xiàn)在已經(jīng)超過(guò) 7 年了. 雖然它在大多數(shù)瀏覽器中仍然可以正常工作，但這里是基于 @TypeError 建議的更新版本這只適用于更現(xiàn)代的瀏覽器iOS Safari 可能例外(可能支持也可能不支持responseType = 'blob' - 確保測(cè)試！):

var xhr = new XMLHttpRequest();xhr.open('get', 'doodle.png', true);//直接將數(shù)據(jù)作為 Blob 加載.xhr.responseType = 'blob';xhr.onload = () =>{document.querySelector('#myimage').src = URL.createObjectURL(this.response);};xhr.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true);

xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  if (this.status == 200) {
    var uInt8Array = new Uint8Array(this.response);
    var byte3 = uInt8Array[4]; 

    var bb = new WebKitBlobBuilder();
    bb.append(xhr.response);
    var blob = bb.getBlob('image/png'); 
    var base64 = window.btoa(blob);
    alert(base64);

  }
};

xhr.send();

Basically, what I am trying to do here is retrieve an image, and convert it to base64.

From reading in the comments here, it states:

"Sure. After fetching a resource as an ArrayBuffer, create a blob from it. Once you have that, you could base64 encode the file/blob directly window.btoa() or FileReader.readAsDataURL()."

However, blob is just [object blob], while I need to get the binary from the image so I can convert it to base64 and display it in a img tag using data.

Anyone know how to achieve this?

Thank you in advance!

Don't use BlobBuilder in Chrome (tested in OSX Chrome, Firefox 12, Safari 6, iOS Chrome, iOS Safari):

ex1 : http://jsfiddle.net/malraux/xGUsu/ (principle)

ex2: http://jsfiddle.net/xGUsu/78/ (working with full example)

var xhr = new XMLHttpRequest();
xhr.open('GET', 'doodle.png', true);

xhr.responseType = 'arraybuffer';

// Process the response when the request is ready.
xhr.onload = function(e) {
  if (this.status == 200) {
    // Create a binary string from the returned data, then encode it as a data URL.
    var uInt8Array = new Uint8Array(this.response);
    var i = uInt8Array.length;
    var binaryString = new Array(i);
    while (i--)
    {
      binaryString[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    document.getElementById("myImage").src="data:image/png;base64," + base64;
  }
};

xhr.send();

Note: This code is over 7 years old at this point. While it should still function in most browsers, here's an updated version based on a suggestion by @TypeError that will only work in more modern browsers with the possible exception of iOS Safari (which may or may not support responseType = 'blob' - make sure to test!):

var xhr = new XMLHttpRequest();
xhr.open('get', 'doodle.png', true);

// Load the data directly as a Blob.
xhr.responseType = 'blob';

xhr.onload = () => {
  document.querySelector('#myimage').src = URL.createObjectURL(this.response);
};

xhr.send(); 

這篇關(guān)于從 XHR 請(qǐng)求中獲取 BLOB 數(shù)據(jù)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！