从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。一旦你有了，你可以直接对文件/ blob进行base64编码（window.btoa（））或FileReader。 readAsDataURL（）“。

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

谁知道如何实现这一目标？

先感谢您！

Answer 1

XMLHttpRequest的var xmlhttp = new XMLHttpRequest();xmlhttp.open('GET', 'http://RestServiceURL-Returns Image', true);xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');xmlhttp.responseType = 'arraybuffer/blob';xmlhttp.send();以3种方式创建blob图像。window.URL。createObjectURLFileReader（caniuse）Base64Stringxmlhttp.onload = function() {    var blob = new Blob([this.response], {type: 'image/png'});     console.log(blob, blob.type, this.response, typeof this.response);      var image = document.getElementById('my-image');    1)image.src = window.URL.createObjectURL(blob);    2)var fileReader = new window.FileReader();    fileReader.readAsDataURL(blob);    fileReader.onloadend = function() {     image.src = fileReader.result;    }    3)var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response)));    image.src = 'data:image/png;base64,'+base64String;};将ArrayBuffer转换为Blob转换为ArrayBuffer1)var dataView = new DataView(arrayBuffer);var blob = new Blob([dataView], { type: mimeString });2)fileReader.readAsArrayBuffer(blob);var arrayBuffer;fileReader.onload = function() {    arrayBuffer = this.result;};