ファイルサイズの大きな画像を読み込んだときには、処理が終了するまで多少時間が掛かりますので暫くお待ちください。場合によっては、ブラウザがフリーズする可能性もありますので、なるべくサイズの小さな画像を選択することをおすすめします。
このツールについて
画像をData URIに変換するツールです。
上の青い枠内をクリック(もしくはドラッグ&ドロップ)して、画像を読み込むと、その画像の Data URI の文字列が出力されます。
変換されたData URIの文字列を、imgタグのsrc属性やaタグのhref属性などに指定することで、画像を直接HTMLに埋め込んで表示させることができます。また、画像の Data URI を直接ブラウザのアドレスバーに貼り付けても画像が表示されます。
HTMLへの画像の埋め込み
今回は例としてこちらの緑のストライプ画像を使います。
この画像を読み込むと、以下のようにData URIが出力されます。
この文字列を丸ごとコピーして、imgタグのsrc属性やaタグのhref属性などに指定します。
<!--imgタグのsrc属性に Data URIを入れて画像を埋め込み-->
<img src="data:image/png;base64,iVBORw0KGgo...(略)...lFTkSuQmCC"/>
<!--aタグのhref属性に Data URIを入れて新しいタブで画像を開く-->
<a href="data:image/png;base64,iVBORw0KGgo...(略)...lFTkSuQmCC" target="_blank">画像へのリンクです</a>
このツールでは、出力される Data URI の横の「imgタグ」ボタンや「aタグ」ボタンを押すと、imgタグやaタグとしてそのままコピーしてHTMLで使える形になっていますので、必要に応じてご利用ください。
背景画像としてスタイルシートに埋め込み
CSSのbackground-imageプロパティやbackgroundプロパティのURLに
background-image: url("data:image/png;base64,iVBORw0KGgo...(略)...lFTkSuQmCC");というような感じで指定すればOKです。
これはサンプルです。CSSに埋め込んだ画像を、この背景で使用しています。
参考サイト
readAsDataURL()は、FileReaderのメソッドです。ファイルを、Data URIとして読み込むメソッドです。例えば画像ファイルをこのメソッドで読み込んで、読み込んだデータをimg要素のsrc属性に指定すればブラウザに表示できます。
A pure Javascript file upload with drop zone (drag & drop) and image preview. - **No Jquery or Plugins required.**
