从 XHR 请求中获取 BLOB 数据

问题描述

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模板网！