【Blob・File・Base64・データURL・FileReader】 それぞれの特徴とブラウザへの表示について

はじめに

この記事では、ファイルを受け取ってからブラウザ上に表示するまでに登場する、インターフェースやオブジェクトの特徴を調べ、みなさんが要件に適したファイル操作を選択できるよう祈りながら書きました。

それぞれの特徴

Blob

• HTML5のFile APIで定義されたインターフェースである
• バイナリ・ラージ・オブジェクトの略である
• Blobオブジェクトには、生のバイナリデータが格納されている
• プロパティはsizeとtypeのみで、中のデータに直接アクセスすることはできない
• Blobオブジェクトはimmutable(不変)であり、を直接編集することはできない
• が、sliceメソッドによる分割や、コンストラクタによる結合を行うことができる

https://developer.mozilla.org/ja/docs/Web/API/Blob
https://ja.javascript.info/blob

File

• HTML5のFile APIで定義されたインターフェースである
• Blobインターフェースを継承しているため、Blobを引数に取るメソッドに渡すことができる
• 異なるのは、よりファイルを扱いやすくするために、name,lastModifiedプロパティが追加されている点
• <input type="file">にローカルファイルを与えると、files属性か、onchangeイベント経由で、 FileListオブジェクトが得られる。FileListオブジェクトに対してインデックスを渡すことでFileオブジェクトを取得することができる

https://developer.mozilla.org/ja/docs/Web/API/File
https://ja.javascript.info/file

FileReader

• FileReaderは、Blob（File）オブジェクト内のバイナリデータを読み込むためのオブジェクト
• FileReaderオブジェクトには、下記のようなメソッドがあり（非推奨のものは除く）、Blobオブジェクトを様々な形式で読み取ることができる
  • readAsArrayBuffer() →ArrayBuffer
  • readAsDataURL() →DataURL
  • readAsText() →文字列
  • abort() →読み取り中断

https://developer.mozilla.org/ja/docs/Web/API/FileReader
https://ja.javascript.info/file

Base64

• Base64というクラスやインターフェースは存在せず、バイナリデータをStringに変換するためのエンコード方式である
• エンコード前のバイナリデータと比べて約33~37%データサイズが増加する

データURL

• data:[<mediatype>][;base64],<data>という形式で記述されたURLである
• 例えばテキストデータでは、data:text/plain;base64,dGVzdA==のような感じのURLで、これをアドレスバーに入力するとtestと表示される
• jpeg画像ファイルを示すデータURLはdata:image/jpeg;base64,という文言から始まる
• URL内にテキストや画像データが埋め込まれているため、URL自体が比較的大きいサイズになる

BlobやFileに格納されているファイルをブラウザ上に表示する方法

以下、画像ファイルの表示を例にして説明する。
画像ファイルをブラウザ上に表示するためには、imgタグのsrc属性にURL（データURLを含む）を与える必要がある。

URLを取得するには２つの方法がある

• Blob(File)をデータURLとして読み取る
• Blobを参照するURLを生成する

以下、方法とメリット・デメリットを記述する

BlobをデータURLとして読み取る

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result) //データURLがコンソールに表示される
}
reader.readAsDataURL(blob) //ここでBlobオブジェクトを読み込み、読み込みが完了したタイミングでreader.onloadに定義した関数が実行される

メリット

• ファイルの読み込みを非同期で行うことができる。
• URLそのものにデータが埋め込まれているため、URLを直接サーバーに渡すことが可能。

デメリット

• Base64エンコードの仕様に則り、データサイズが１３３％ほどに増える
• メモリ上にファイルを展開するため、メモリを圧迫する

Blobを参照するURLを生成する

const imageUrl = window.URL.createObjectURL(blob) //URL生成
console.log(imageUrl) //メモリ上のBlobを参照するURLがコンソールに表示される
window.URL.revokeObjectURL(imageUrl) //URL破棄

メリット

• URLの生成が即時完了する

デメリット

• 一時的なURLであり、ブラウザを開き直したり、他端末や他ブラウザに渡してもアクセスできない
• window.URL.revokeObjectURL()によってURLを破棄しないと、ブラウザを閉じるまでメモリ上にURLが残ってしまう