XHRを介してArrayBufferを取得していて、FileWriterを使用してFileSystemAPIに保存したいと思います。FileWriterはBlobを想定しており、BlobコンストラクターはArrayBufferを取得せず、ArrayBufferViewを取得します。
選択できるArrayBufferViewは多数ありますが、どれを使用するのが正しいかをどのように知ることができますか?
XHRを介してArrayBufferを取得していて、FileWriterを使用してFileSystemAPIに保存したいと思います。FileWriterはBlobを想定しており、BlobコンストラクターはArrayBufferを取得せず、ArrayBufferViewを取得します。
選択できるArrayBufferViewは多数ありますが、どれを使用するのが正しいかをどのように知ることができますか?
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[]
Javaint[]
はfloat[]
常にdouble[]
署名されているため、その部分は重要ではありません) )。
画像のようなバイナリデータは通常、バイト配列として表されます。短い/整数/長い配列も可能ですが、これはメモリスペースの浪費です。100KBの画像(「B」は8ビットであるバイトを表すことに注意してください)をバイト配列ではなくint配列に格納すると、400KBのメモリを占有し、300KBの無駄になります。したがって、Int8Array
メモリスペースに関しては、最小のものですでに十分です。プログラムでそれをトラバースしたい場合(この場合はほとんどありません)、符号なし配列として、Uint8Array
各項目が値の代わりに値0
を保持する代わりに選択することができます。255
-128
127
これは、コピー'n'paste'n'実行可能なキックオフの例です。これは、サーバーから画像ファイルをダウンロードし、それを一時的なローカルストレージスペースに保存して<img>
、本文に表示します(その部分には小さなjQueryが必要です)。image.png
この例では、ファイルがJS(またはJSがインライン化されている場合はHTML)ファイルがダウンロードされたのと同じベースフォルダーにあることを前提としています。
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でのみ機能することに注意してください。