Chrome ブラウザだけで、画像の DataURI を簡単に取得する方法を紹介します。
-
適当な画像を右クリックし
新しいタブで画像を開くを選択します。 -
新しいタブで表示された画像をさらに右クリックし、
要素の検証を選択します。 -
DevTools の Elements タブが表示されるので、画像のリンクをクリックします。
-
表示されているBase64文字列を選択しコピーします。
Command + A (Windows なら Control + A) で全選択してからコピーしましょう。
ダブルクリックやトリプルクリックでも選択できますが、コピペミスの確率がぐっと上がるので、キーボードを使いましょう。
以上です。
手順が4つほど必要になりますが、サーバに画像をアップロードする必要がなく、file:///... な画像でも扱えるので、(数が少ない場合は)専用の変換ツールを使うよりも楽なのではないでしょうか。
取得したBase64文字列を利用するときは、画像フォーマットに応じて先頭に data:image... を追加します。
| png | data:image/png;base64, |
| jpeg | data:image/jpeg;base64, |
Markdown で GitHub/wiki, gist, はてなブログ に埋め込むには
 とします。
https://chrome.google.com/webstore/detail/copy-base64/obeffifkdkfbpodhaoelcjdljgiapjnl?hl=ja を入れると右クリック一発で出来ます。
(ε・◇・)з o O ( 「おやおや、これまでの説明は何だったんだ?」デース