オレの Advent Calendar 2015 - Adventar の 23 日目です.

HTML5 File API の readAsDataURL を使ってファイルを Data URI Scheme に変換するツール作りました.
下のツール上にファイルをドラッグ&ドロップすると Data URI Scheme に変換した内容が表示されます.

image タグに指定していたファイルパスを Data URI scheme に変換して埋め込めばページの読み込み速度が上がったり, 音楽ファイルを Data URI scheme に変換して埋め込めばクロスドメイン制約から開放されたりもするので, よかったら使ってみてください.

Tool

作ったツールです. 下記のフレーム内にファイルをドラッグ&ドロップすると中身を Data URI Scheme に変換して表示します.

また, 右側のボタンを押すと結果を確認することもできます.

Tips

ドラッグ & ドロップ対応

普通ページ上にファイルをドラッグ&ドロップするとそのファイルを開いてしまいます. 下記のようにすることでそれをキャンセルすることができます.

  var cancelEvent = function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  };

  document.addEventListener("dragover", cancelEvent, false);
  document.addEventListener("dragenter", cancelEvent, false);

ファイルを Data URI Scheme として読み込む

FileReader の readAsDataURL を使えば簡単です♪

FileReader を生成して, readAsDataURL() に読み込みたいファイルを渡して実行するだけです.
読み込みが完了すると onload イベントが発火するので, その中の event.target.result で結果を参照できます.

var reader = new FileReader();  
reader.onload = function(e) {  
  app.files.push({
    name: file.name,
    value: e.target.result,
  });
};
reader.readAsDataURL(file);