javascript - 哪个ArrayBufferView

Question

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

有很多 ArrayBufferViews 可供选择，我怎么知道哪个是正确的？

Answer 1

在MDN，您可以找到所有可用子类的概述ArrayBufferView：

Type         | Size | Description                           | Equivalent C type
-------------+------+---------------------------------------+------------------
Int8Array    | 1    | 8-bit twos complement signed integer  | signed char
Uint8Array   | 1    | 8-bit unsigned integer                | unsigned char
Int16Array   | 2    | 16-bit twos complement signed integer | short
Uint16Array  | 2    | 16-bit unsigned integer               | unsigned short
Int32Array   | 4    | 32-bit twos complement signed integer | int
Uint32Array  | 4    | 32-bit unsigned integer               | unsigned int
Float32Array | 4    | 32-bit IEEE floating point number     | float
Float64Array | 8    | 64-bit IEEE floating point number     | double

基本上，这列出了数组的每个项目将占用的内存空间，以及它是普通数字还是 FP 数字。我不确定您熟悉哪些语言，但如果它也涵盖 Java，那么它基本上与您在byte[], short[], int[], float[]and double[](Java 总是签名的，所以这部分无关紧要）。

我们知道，像图像这样的二进制数据通常表示为字节数组。short/int/long 数组也可以，但是这样会浪费内存空间。如果你将一个100KB的图像（注意“B”代表字节，即8位）存储在一个int数组而不是字节数组中，那么它会占用400KB的内存，浪费了300KB。因此，最小的 ,Int8Array就内存空间而言已经足够了。如果您想以编程方式遍历它（在这种情况下不太可能）作为无符号数组，那么您可以选择Uint8Array每个项目都保存值0to255而不是值-128to 的地方127。

这是一个 copy'n'paste'n'runnable 启动示例，它从服务器下载图像文件，将其保存到临时本地存储空间并将其呈现为<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。