javascript - 哪个ArrayBufferView

Question

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

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

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[]和 double[] (Java 总是签名的，所以这部分无关紧要)。

我们知道，像图像这样的二进制数据通常表示为字节数组。一个short/int/long数组也可以，但是这样很浪费内存空间。如果你将一个 100KB 的图像(注意“B”代表字节，它是 8 位)存储在一个 int 数组而不是一个字节数组中，那么它将占用 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();
}

请注意，截至 current状态，这仅适用于 Chrome。