ArrayBuffer オブジェクト、Blob オブジェクト
ArrayBuffer オブジェクト
ArrayBuffer オブジェクトはバイナリ データを表し、メモリ内のデータをシミュレートするために使用されます。このオブジェクトを通じて、JavaScript はバイナリ データの読み取りと書き込みを行うことができます。このオブジェクトはメモリ データの表現として見ることができます。
このオブジェクトは ES6 の標準にのみ組み込まれており、通常の Web プログラミングでは使用されません。チュートリアル システムの完全性を考慮して、以下に簡単な説明のみを示します。詳細については、「ES6 標準の概要」の章を参照してください。 」。
ブラウザーは、インスタンスを生成するための ArrayBuffer() コンストラクターをネイティブに提供します。このバイナリ データが占めるバイト数を示す整数をパラメータとして受け入れます。
var バッファ = 新しい ArrayBuffer(8);
上記のコードでは、インスタンス オブジェクト buffer は 8 バイトを占有します。
ArrayBuffer オブジェクトにはインスタンス属性 byteLength があり、現在のインスタンスが占有するメモリ長 (単位バイト) を示します。
var バッファ = 新しい ArrayBuffer(8);
buffer.byteLength // 8
ArrayBuffer オブジェクトにはインスタンス メソッド slice() があり、メモリの一部をコピーするために使用されます。コピーの開始位置 (0 から開始) と終了位置 (コピー時に終了位置は含まれません) を示す 2 つの整数パラメーターを受け取ります。2 番目のパラメーターを省略した場合は、最後までコピーすることを意味します。
var buf1 = 新しい ArrayBuffer(8);
var buf2 = buf1.slice(0);
上記のコードは、元のインスタンスをコピーすることを意味します。
BLOB オブジェクト
導入
Blob オブジェクトはバイナリ ファイルのデータ コンテンツを表します。たとえば、画像ファイルのコンテンツは Blob オブジェクトを通じて読み書きできます。通常、ファイルの読み書きに使用され、その名前は Binary Large Object の略称です。 ArrayBuffer との違いは、ArrayBuffer はバイナリ ファイルの操作に使用されるのに対し、ArrayBuffer はメモリの操作に使用されることです。
ブラウザーは、インスタンス オブジェクトを生成するための Blob() コンストラクターをネイティブに提供します。
新しい BLOB(配列 [, オプション])
Blob コンストラクターは 2 つのパラメーターを受け取ります。最初のパラメータは配列で、そのメンバーは新しく生成された Blob インスタンス オブジェクトの内容を表す文字列またはバイナリ オブジェクトです。2 番目のパラメータはオプションであり、現在、属性 type は 1 つだけあります。値はデータの MIME タイプを表す文字列です。デフォルトは空の文字列です。
var htmlFragment = ['<a id="a"><b id="b">やあ!</b></a>'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});
上記のコードでは、インスタンス オブジェクト myBlob に文字列が含まれています。インスタンス生成時のデータ型は「text/html」として指定します。
JSON データを保持する BLOB の別の例を次に示します。
var obj = { こんにちは: '世界' };
var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});
インスタンスのプロパティとインスタンス メソッド
Blob には 2 つのインスタンス属性 size と type があり、それぞれデータのサイズと型を返します。
var htmlFragment = ['<a id="a"><b id="b">やあ!</b></a>'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});
myBlob.size // 32
myBlob.type // "テキスト/html"
Blob にはインスタンス メソッド slice があり、元のデータをコピーして Blob インスタンスを返すために使用されます。
myBlob.slice(開始、終了、contentType)
「slice」メソッドには 3 つのパラメータがあり、それらはすべてオプションです。それらは、開始バイト位置 (デフォルトは 0)、終了バイト位置 (デフォルトは size 属性の値であり、位置自体はコピーされたデータには含まれません)、データ型の順です。新しいインスタンス (デフォルトは空の文字列)。
ファイル情報の取得
ファイル セレクター <input type="file"> は、ユーザーがファイルを選択できるようにするために使用されます。セキュリティ上の理由から、ブラウザではスクリプトがこのコントロールの「value」属性を独自に設定することはできません。つまり、ファイルはユーザーが手動で選択する必要があり、スクリプトで指定することはできません。ユーザーがファイルを選択すると、スクリプトはそのファイルを読み取ることができます。
ファイル セレクターは、配列のようなメンバーである FileList オブジェクトを返します。各メンバーは File インスタンス オブジェクトです。 File インスタンス オブジェクトは、name プロパティと lastModifiedDate プロパティが追加された特別な BLOB インスタンスです。
// HTMLコードは以下の通り
// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>
関数 fileinfo(files) {
for (var i = 0; i < files.length; i++) {
var f = ファイル[i];
コンソール.log(
f.name, // ファイル名、パスなし
f.size, // ファイル サイズ、BLOB インスタンス属性
f.type, // ファイルタイプ、BLOB インスタンス属性
f.lastModifiedDate //ファイルの最終変更時刻
);
}
}
ファイル セレクターに加えて、ドラッグ アンド ドロップ API の dataTransfer.files も FileList オブジェクトを返すため、そのメンバーは File インスタンス オブジェクトでもあります。
ファイルをダウンロードする
AJAX リクエストを行うときに、responseType 属性が blob として指定されている場合、Blob オブジェクトがダウンロードされます。
関数 getBlob(url, コールバック) {
var xhr = 新しい XMLHttpRequest();
xhr.open('GET', URL);
xhr.responseType = 'ブロブ';
xhr.onload = 関数 () {
コールバック(xhr.response);
}
xhr.send(null);
}
上記のコードでは、xhr.response が取得するのは Blob オブジェクトです。
URL を生成
ブラウザでは、URL.createObjectURL() メソッドを使用して、特定の API で使用する Blob オブジェクトの一時 URL を生成できます。この URL は「blob://」で始まり、Blob オブジェクトに対応することを示します。プロトコル ヘッダーの後には、メモリ内で Blob オブジェクトに一意に対応する識別子が続きます。これは、data://URL (実際のデータを含む URL) や file://URL (ローカル ファイル システム内のファイル) とは異なります。
var droptarget = document.getElementById('droptarget');
Droptarget.ondrop = 関数 (e) {
var ファイル = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var type = files[i].type;
if (type.substring(0,6) !== 'image/')
続く;
var img = document.createElement('img');
img.src = URL.createObjectURL(files[i]);
img.onload = 関数 () {
this.width = 100;
document.body.appendChild(this);
URL.revokeObjectURL(this.src);
}
}
}
上記のコードは、ドラッグ アンド ドロップされた画像ファイルの URL を生成し、そのサムネイルを生成して、ユーザーが選択したファイルをプレビューできるようにします。
ブラウザーは、Blob URL を通常の URL と同様に処理します。Blob オブジェクトが存在しない場合は 404 ステータス コードが返され、クロスドメイン要求が行われた場合は 403 ステータス コードが返されます。 BLOB URL は GET リクエストに対してのみ有効です。リクエストが成功すると、ステータス コード 200 が返されます。 Blob URLは通常のURLなのでダウンロードできます。
ファイルを読み取る
Blob オブジェクトを取得した後、FileReader オブジェクトを通じて Blob オブジェクトの内容、つまりファイルの内容を読み取ることができます。
FileReader オブジェクトには、Blob オブジェクトを処理するための 4 つのメソッドが用意されています。 BLOB オブジェクトはこれらのメソッドに引数として渡され、指定された形式で返されます。
FileReader.readAsText(): テキストを返します。テキスト エンコーディングを指定する必要があります。デフォルトは UTF-8 です。FileReader.readAsArrayBuffer(): ArrayBuffer オブジェクトを返します。FileReader.readAsDataURL(): データ URL を返します。FileReader.readAsBinaryString(): 元のバイナリ文字列を返します。
以下は、テキスト ファイルを読み取るために使用される FileReader.readAsText() メソッドの例です。
// HTMLコードは以下の通り
// <input type="file" onchange="readfile(this.files[0])"></input>
// <pre id="output"></pre>
関数 readfile(f) {
var リーダー = 新しい FileReader();
Reader.readAsText(f);
Reader.onload = 関数 () {
var text = リーダー.結果;
var out = document.getElementById('output');
out.innerHTML = '';
out.appendChild(document.createTextNode(text));
}
Reader.onerror = function(e) {
console.log('エラー', e);
};
}
上記のコードでは、FileReader インスタンス オブジェクトの onload リスニング関数を指定することで、インスタンスの result 属性からファイルの内容を取得しています。
以下は、バイナリ ファイルを読み取るために使用される FileReader.readAsArrayBuffer() メソッドの例です。
// HTMLコードは以下の通り
// <input type="file" onchange="typefile(this.files[0])"></input>
関数タイプファイル(ファイル) {
// ファイルの先頭の 4 バイトにより Blob オブジェクトが生成されます
var スライス = ファイル.スライス(0, 4);
var リーダー = 新しい FileReader();
//これらの 4 バイトを読み取ります
Reader.readAsArrayBuffer(スライス);
Reader.onload = 関数 (e) {
var バッファ = リーダー.結果;
// これら 4 バイトの内容を 32 ビット整数として扱います
var view = 新しいDataView(バッファ);
var magic = view.getUint32(0, false);
// ファイルの最初の 4 バイトに基づいて、そのタイプを決定します
スイッチ(魔法) {
ケース 0x89504E47: file.verified_type = 'image/png';
ケース 0x47494638: file.verified_type = 'image/gif';
ケース 0x25504446: file.verified_type = 'アプリケーション/pdf';
case 0x504b0304: file.verified_type = 'アプリケーション/zip';
}
console.log(file.name, file.verified_type);
};
}
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0