ファイルにまつわるオブジェクトやエンコード形式など
Blob(バイナリ・ラージ・オブジェクト)
- HTML5のFile APIで定義されたインターフェイス
- ブラウザのメモリ上にあるバイナリを表現する。
- 生のバイナリデータが格納されている。
- プロパティはsizeとtypeのみで中のデータに直アクセスはできない。
- immutable(不変）なので直編集はできない。
- sliceによる分割、コンストラクタによる結合はできる。
- newするとインスタンス化できる。
|
1 2 3 4 |
const arrBfr = new ArrayBuffer(5); // 第一引数：バイト数：BloBのサイズになる。 // 第二引数：バイナリのMIME/TYPE（以下の例であればプレーンテキスト） const blob = new Blob([arrBfr],{"text/plain"}) |
File
- HTML5のFile APIで定義されたインターフェイス
- BLOBのサブオブジェクト
- Blobインターフェイスを継承しているのでBlobを引数にとるメソッドをそのまま使える。
- name、lastModifiedプロパティが追加されている。
- フォームで<input type="file">にローカルファイルを与えるとFileListオブジェクトが得られてその中からインデックスを渡すと取得できる。
- newするとインスタンス化できる。
|
1 2 3 |
// arrBfrで指定したサイズだけ確保される。 const file = new File([arrBfr],"notes.txt",{"text/plain"}) |
Base64
- クラスやインターフェイスなどは存在しない。
- バイナリデータをStringに変換するためのエンコード形式
- 64種類の英数字のみ用いているのでどのデバイスでも使える。
- エンコード前のバイナリデータに比べてデータサイズが増加する。
データURL
- 「data:[<mediatype>][;base64],<data>」という形式で記述されたURL
ファイルを扱うためのオブジェクト
ArrayBuffer
JavaScriptでバイナリを扱うためのクラスです。直接読み書きはできません。物理メモリの領域(バッファ）を確保するためのクラス。ただしメモリを確保するだけでバッファに対する操作は提供していないです。Blobに比べて直接操作ができる。(ミュータブルなクラス)
宣言
以下を宣言することで指定した長さの物理メモリ空間がバイナリ保存用に確保されます。
|
1 |
const buf = new ArrayBuffer(確保したいバイナリの長さ); |
あまりにも大きい長さを指定しようとするとメモリ不足で怒られます。
読み書き
型付き配列(Typed Array)で行う。
|
1 2 |
const buf = new ArrayBuffer(100); // メモリ空間の確保 const view = new Uint8Array(buf); // メモリ空間へアクセス |
Unit8Array
バイナリへのアクセス方式を8bit整数（符号なし）で行いたい時に使用する型付き配列のサブクラスの一種
byteLengthプロパティ
バッファの総バイトサイズ
sliceメソッド
バッファの開始位置と終了位置を指定して新しいArrayBufferを生成します。
TypedArrays
バッファの操作ができます。Float32ArrayやUnit8Arrayなど型を指定してバッファから配列を生成します。
通常の配列のように添字によってバッファにアクセス可能で高速読み書きができます。
Blobに比べて直接操作ができる。(ミュータブルなクラス)
なお、CanvasのgetImageDataで取得できるImageDataはTypedArrayで直接操作することで画像をバイナリとして扱えます。
DataView
TypedArrayより高機能なバッファの操作ができます。
FileReader
File APIの機能の一つ。ユーザーのローカルに保存されているデータ（Blob(File)オブジェクト内のバイナリデータ）を非同期に読み込むためのオブジェクト
readAsArrayBuffer
ArrayBuffer形式で読み取れる。
readAsDataURL
DataURL形式で読み取れる。DataURLなのでbase64のデータなども取得できます。
readAsText
文字列形式で読み取れる。
abort
読み取り中断
BlobやFileをブラウザ上に表示する。
Blob(File）をデータURLとして読み取る。
FileReaderのreadAsDataURLを使います。
デメリット
- base64にするので、データサイズが増える。(サイズは4/3倍になるようです。)
- メモリ上に展開するためメモリを逼迫する。(100MBを超える場合はまずブラウザが応答停止になります。)
Blobを参照するURL（Blob URL Schema）を生成する。
window.URL.createObjectURLでURLを生成する。
デメリット
一時的なものなので他端末や他ブラウザに渡してもアクセスできない。
この記事へのコメントはありません。