0

我需要通过 ajax 下载图像文件，将其保存到 blob 并稍后显示在图像标签中。在我正在使用的 webkit 中

var xhr = new XMLHttpRequest();
var imgSrc = "test.jpg";
xhr.responseType = 'arraybuffer';
xhr.open("GET", imgSrc, true);
xhr.onload = function (oEvent) {
  console.log('onload1');
  var blob = new Blob([xhr.response], {type: "image/jpg"});
  console.log(blob.size);
  var img = document.createElement('img');
  img.onload = function() {
    console.log('onload2');
    document.body.appendChild(img);
  }
  img.onerror = function() {
    console.log('error');
  }
  img.src = webkitURL.createObjectURL(blob);
}
xhr.send(null);

图像大小为 43312，blob 大小为 43312。图像显示正确，到目前为止一切正常。现在让我们转到壁虎：

首先，我被困在 xhr.responseType = 'arraybuffer'; 出于某种原因，firefox 只接受“arrayBuffer”而不接受“arraybuffer”。这很令人困惑，因为根据https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest，壁虎也应该接受数组缓冲区。

然后我用 URL 替换 webkitURL。图像已下载，blob 已创建，但大小为 77978，图像加载失败（显然，图像数据已损坏）。

4

1 回答 1

0

好的，谜团解开了。

在Firefox中，您需要先执行xhr.open，然后您可以将responseType设置为arraybuffer。

于 2013-10-02T08:49:02.357 回答