哪个ArrayBufferView

Question

我正在通过 XHR 检索 ArrayBuffer，并希望使用 FileWriter 将其保存到文件系统 API。 FileWriter 需要一个 Blob，而 Blob 构造函数不会采用 ArrayBuffer，而是采用 ArrayBufferView。

有很多 ArrayBufferView 可供选择，我如何知道哪个是正确的？

Answer 1

在 MDN，您可以找到所有可用

ArrayBufferView

子类的概述：

类型	字节	描述	等效C型
Int8Array	1	8 位二进制补码有符号整数	int8_t
Uint8Array	1	8 位无符号整数	uint8_t
Uint8ClampedArray	1	8 位无符号整数（钳位）	uint8_t
Int16Array	2	16 位二进制补码有符号整数	int16_t
Uint16Array	2	16 位无符号整数	uint16_t
Int32Array	4	32 位二进制补码有符号整数	int32_t
Uint32Array	4	32 位无符号整数	uint32_t
Float32Array	4	32 位 IEEE 浮点数	float
Float64Array	8	64 位 IEEE 浮点数	double
BigInt64Array	8	64 位二进制补码有符号整数	int64_t
BigUint64Array	8	64 位无符号整数	uint64_t

基本上，这列出了数组中每个项目将占用的内存空间以及它是普通数字还是 FP 数字。我不确定您熟悉哪些语言，但如果它也涵盖 Java，那么它基本上与您在

byte[]

、

short[]

、

int[]

、

float[]

和

 上所做的选择相同double[]

（Java 总是有签名的，所以这部分并不重要）。

我们知道，像图像这样的二进制数据通常表示为字节数组。 Short/int/long 数组也可以，但是这样会浪费内存空间。如果你将一个 100KB 的图像（注意“B”代表 byte，即 8 位）存储在 int 数组而不是 byte 数组中，那么它将占用 400KB 的内存，这就浪费了 300KB。因此，最小的

Int8Array

就已经足够存储空间了。如果您想以编程方式遍历它（在本例中不太可能）作为无符号数组，那么您可以选择

Uint8Array

，而不是每个项目保存值

0

到

255

而不是值

 -128

至

127

。

这是一个复制'n'粘贴'n'可运行的启动示例，它从服务器下载图像文件，将其保存到临时本地存储空间，并将其呈现为正文中的

<img>

（该部分需要很少的jQuery） ）。此示例假设

image.png

文件与 JS（或 HTML，如果 JS 是内联的）文件位于同一基本文件夹中：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, startDownload, errorHandler);

var errorHandler = function(error) {
    console.log('FS error: ' + error);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.png', true);
xhr.responseType = 'arraybuffer';

function startDownload(fileSystem) {
    xhr.onload = function(event) {
        var content = new Int8Array(this.response);
        fileSystem.root.getFile('/image.png', { 'create': true }, function(fileEntry) {
            fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function(event) {
                    $('body').append('<p>Image successfully downloaded:</p>')
                             .append('<p><img src="' + fileEntry.toURL() + '"/></p>');
                };

                var blob = new Blob([content], { type: 'image/png' });
                fileWriter.write(blob);
            }, errorHandler);
        });
    }

    xhr.send();
}

注意，截至当前状态，此功能仅适用于 Chrome、Edge 和 Opera，（还？）不适用于 Safari 或 Firefox。