从XHR请求获取BLOB数据

Question

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

基本上，我在这里尝试做的是检索图像并将其转换为base64。

通过阅读此处的评论，它指出：

“当然。在将资源作为ArrayBuffer提取后，从中创建一个blob。一旦有了它，就可以直接对base / blob
window.btoa()或进行base64编码 FileReader.readAsDataURL()。”

但是，blob只是[object blob]，而我需要从图像中获取二进制文件，以便可以将其转换为base64并使用数据将其显示在img标签中。

有人知道如何实现这一目标吗？

先感谢您！

Answer 1

不要在Chrome中使用BlobBuilder（在OSX Chrome，Firefox 12，Safari 6，iOS Chrome，iOS
Safari中测试过）：

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

注意 ： 此代码已超过7年的历史了。
尽管它仍然可以在大多数浏览器中正常运行，但这是基于@TypeError的建议的更新版本，该建议仅适用于更现代的浏览器 ，但iOS
Safari可能会例外 （可能支持或可能不支持responseType = 'blob'-请确保进行测试！）：

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