問題描述

var xhr = new XMLHttpRequest();xhr.open('GET', 'http://static.reddit.com/reddit.com.header.png', true);xhr.responseType = 'arraybuffer';xhr.onload = 函數(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);警報(base64)；}};xhr.send();

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

從這里的評論中閱讀，它指出:

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

但是，blob 只是 [object blob]，而我需要從圖像中獲取二進制文件，以便將其轉換為 base64 并在 img 中顯示使用數據標記.

有人知道如何實現嗎?

提前謝謝你！

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

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';//當請求準備好時處理響應.xhr.onload = 函數(e){如果(this.status == 200){//從返回的數據創建一個二進制字符串，然后將其編碼為數據 URL.var uInt8Array = new Uint8Array(this.response);var i = uInt8Array.length;var binaryString = new Array(i);當我 - ){binaryString[i] = String.fromCharCode(uInt8Array[i]);}var data = binaryString.join('');var base64 = window.btoa(數據);document.getElementById("myImage").src="data:image/png;base64," + base64;}};xhr.send();

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

var xhr = new XMLHttpRequest();xhr.open('get', 'doodle.png', true);//直接將數據作為 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(); 

這篇關于從 XHR 請求中獲取 BLOB 數據的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！