Question

我想从远程URL访问ArrayBuffer。因此，我创建了函数：

        fetch('some url')
            .then(function(response) {
                const file = new File([response], response.url, {type:'image/jpg'});
                const reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = function(e) {
                    const dataURL = reader.result;
                    console.log(dataURL);
                };
            })

我得到了错误的ArrayBuffer大小：ArrayBuffer（17 =我的Url的长度）而不是实际的图像大小（我认为约为24000）。这是什么问题？

Answer 1

如果您在请求资源的ArrayBuffer之后，请切掉File中间人，然后让响应直接通过Body.arrayBuffer()给您Buffer。

const url = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

fetch(url)
  .then(res => res.arrayBuffer())
  .then(someBuffer => {
    console.log(someBuffer.byteLength);
  });

上面的代码中使用的base64编码图像来自以下答案：How to display Base64 images in HTML?。

提取并获取正确大小后，如何使用FileReader中的readAsArrayBuffer方法？

1 个答案: