从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。createObjectURL

FileReader（caniuse）

Base64String

xmlhttp.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转换为ArrayBuffer

1)var dataView = new DataView(arrayBuffer);

var blob = new Blob([dataView], { type: mimeString });

2)fileReader.readAsArrayBuffer(blob);

var arrayBuffer;

fileReader.onload = function() {

    arrayBuffer = this.result;

};