HTML5 File API の readAsDataURL を使ってファイルを Data URI scheme に変換するツール作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

HTML5 File API の readAsDataURL を使ってファイルを Data URI scheme に変換するツール作ってみました.

というのも, 以前書いた「HTML5 Audio ピアノ制作 : Return – 読み込みによる遅延を解消!」で 音楽ファイルを Data URI scheme に変換する必要がありました. 1個1個変換するツールはいくつかあったのですが, ドレミ… のファイル全部をいちいち1個ずつ変換していくのは面倒だったので, 複数のファイルを簡単に Data URI scheme に変換できるツールを作った次第です.

image タグに指定していたファイル名を Data URI scheme に変換して埋め込めばページの読み込み速度が上がったりもするので, よければ使ってみてください.

SAMPLE And DATA

ツールはこちら.

ファイルを選択, もしくはファイルをドラッグ & ドロップすると Data URI scheme に変換されたデータが表示されます. クリックすると自動で全選択されるのでコピペして使ってください.

About Data URI scheme

Data URI scheme ってのは, uri に data の情報を持たせたもののことです. 詳しいことはこちら.

Format

フォーマットはこんな感じ

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

Examples

下記の例をブラウザのアドレスバーにコピペして飛んでみてください. ブラウザがそれを text や html として認識してくれます.

Text の場合

data:text/plain,Hello, world!

HTML の場合

data:text/html,<html><head><script>alert("Hello, world!");</script></head></html>

Web 楽しいからついつい土日使っちゃうけど, 仕事に役立つこともやんないとなぁ~. でも C/C++ 触る気起きない… 「純粋にアルゴリズム学ぶだけだったら言語なんて関係ないしー」っという言い訳で自身を正当化.

Time is money. 正のスパイラル.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT