Data URI Scheme 変換

(実行例とダウンロードは ↓ 下の方 ↓ にあります)

1.概要

ファイルのデータを data URI scheme のテキストデータに変換するHTMLです。

変換したデータは、例えば、HTMLのページ内に埋め込んで使用できます。

変換には、HTML5 の FileReader API の機能を使用しています。

(ブラウザが対応している必要があります)

2.使い方

data_uri_conv.html を ブラウザで開くと起動します。

ファイルをドラッグ&ドロップすると、

data URI scheme のテキストデータに変換して、テキストボックスに表示します。

また、ファイル選択ボタンをクリックして、ファイルを選択した場合も、同様に

data URI scheme のテキストデータに変換して、テキストボックスに表示します。

[全選択＋コピー] ボタンをクリックすると、テキストボックスの内容を全選択して

クリップボードにコピーします。

クリアボタンをクリックすると、テキストボックスをクリアします。

3.環境

OS : Windows 8.1 (64bit)

ブラウザ : Chrome v67

でのみ動作確認。

4.履歴

2013-4-26 v1.00 (初版)

2013-4-27 v1.01 一部修正(処理見直し等)

2013-5-3 v1.02 一部修正(処理見直し等)

2013-5-5 v1.03 一部修正(処理見直し等)

2013-6-4 v1.04 背景色変更

2013-6-17 v1.05 一部修正(CSS1行削除)

2013-6-21 v1.06 一部修正(effectAllowed設定追加)

2013-6-22 v1.07 一部修正(effectAllowed設定削除)

2013-6-28 v1.08 一部修正(同一ファイルの選択で読み込まない件の対策)

2013-7-3 v1.09 一部修正(同一ファイルの選択で読み込まない件の対策2)

2013-8-30 v1.10 一部修正(ブラウザ判定処理修正)

2013-9-6 v1.11 一部修正(処理見直し等)

2014-1-20 v1.12 一部修正(処理見直し等)

2014-1-22 v1.13 一部修正(処理見直し等)

2014-2-15 v1.14 一部修正(ブラウザ判定処理修正)

2017-7-17 v1.15 一部修正(IE11でのファイル選択改善等)

2017-7-18 v1.16 一部修正(ファイル選択,ドラッグ&ドロップ処理見直し等)

2017-7-21 v1.17 一部修正([全選択＋コピー]ボタン追加等)

2017-7-21 v1.18 一部修正(エラー処理追加等)

2018-6-29 v1.19 一部修正(HTML見直し)

2018-6-30 v1.20 一部修正(HTML見直し)

＜実行例＞

https://hamayapp.appspot.com/static/data_uri_conv.html

＜ダウンロード＞

data_uri_conv.zip (2018-6-30)