哪个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是始终签名,这样部分不要紧).

我们知道,像图像这样的二进制数据通常表示为字节数组.短/ int/long数组也可以,但这是浪费内存空间.如果你要在一个int数组而不是一个字节数组中存储一个100KB的图像(注意"B"代表字节,即8位),那么它将占用400KB的内存,这浪费了300KB.所以最小的一个Int8Array就已经满足了内存空间.如果你改变主意,要编程的方式遍历它-这是在这种情况下,不太可能-作为一个无符号整数数组,那么你可以选择的Uint8Array,而不是每个项目持有值0来255代替值-128来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.