ドラッグ＆ドロップされた画像や音声ファイルをインラインimgやaudioタグに変換するツールをつくってみた

HTMLに画像を埋め込みたい場合に、下記のように、URLではなく直接データをBase64エンコードして埋め込むことができます。
<img src="data:image/png;base64,iVBORw0KGgoAAAAN...">

今回は、このタグを簡単に作成できるツールを作ってみました。

インラインimgタグ生成ツール

MIME type image/png と image/jpeg ¹ だけ受け付けるようにしてます。あと、とりあえず8MB以下の制限をつけてます。
【追記】音声ファイル（audio/wavとmp3ファイル(audio/mpeg)のみ）も対応してみました。
【追記】String.fromCharCode(...バッファ変数) の スプレッド構文(...)で stack over flow が起こるようなので対策してみました。ただし、textareaのサイズ上限は不明・・。

See the Pen ImageAndAudioFileBase64Encoder(Under Construction) by kob58im (@kob58im) on CodePen.

注意事項

• 画像や音声の著作権はもちろんのこと、個人情報が含まれていないかにも注意を！
  （ヘッダー情報とかが埋まっていたりするので、意図せず情報流出させてしまう恐れがあります。）

• CodePenとかに埋め込めますが、あまり巨大なデータを埋め込むと利用規約とかに違反するかもしれません。（ちゃんと読んでないので何ともいえないけど、、）²

参考サイト

• HTML&JavaScript - Drag&Dropでファイルを読み取るまでの解説とサンプル（バイナリビューワ） - Qiita
• JavaScriptでバイナリを扱いたい - Qiita
• よくある MIME タイプ - HTTP | MDN
• Maximum call stack size exceeded エラーの解決策【applyの限界】 | PisukeCode - Web開発まとめ

参考サイト（画像関連）

• 画像をBase64でHTMLファイルに直接埋め込む方法 - design Edge
• ［JavaScript］ 画像変換：<img>要素 ⇔ Base64（相互変換） - Qiita
• 画像をドラッグ＆ドロップで登録してプレビュー表示 - Qiita

参考サイト（Audio関連）

• ※自動再生アリ※音量注意※ 【ワテのHTML講座】ウェブサイトで音声ファイルを再生する【Base64エンコードでも可能】

---

1. 一度描画してから再エンコーディングする処理となっているので、画質が劣化する可能性があります。音声ファイルの処理のほうを真似れば改善できそうですが、今のところ対応予定はありません。（単純に面倒くさい・・・） ↩

2. CodePenに関してはわりと寛容っぽい？Pen Limitations - CodePen Blog，Terms of Service - CodePen Blog ↩