概要

PNG 画像ファイルを Base64 にエンコードして、それを「HTML の img 要素」や「CSS の list-style-type」に直接記述して出力します。

出力例

ターミナル (コマンドプロンプト) で python プログラム png_b64_conv.py を引数有りで実行します。 Python 2 と Python 3 が共存している場合は、Python 3 のもの (python3 など) を指定してください。

下記例のように、 --img オプションの後に PNG 画像のファイル名を入力すると、それを Base64 にエンコードかつ img 要素に記述して、 HTML ファイルに出力します。

$ python3 png_b64_conv.py --img test-for-html-img.png

下記例のように、 --css オプションの後に PNG 画像のファイル名を入力すると、それを Base64 にエンコードかつ CSS の list-style-type に記述して、 HTML ファイルに出力します。

$ python3 png_b64_conv.py --css test-for-css-list.png

ターミナル (コマンドプロンプト) で python プログラム png_b64_conv.py を引数無しで実行します。 Python 2 と Python 3 が共存している場合は、Python 3 のもの (python3 など) を指定してください。

$ python3 png_b64_conv.py

実行すると、下記のような画面が表示されます。

起動時の画面

操作方法は次の通りです。

「1. 画像ファイルを選択してください」の OPEN ボタンでファイルを選択します。
「2. 変換方法を選択してください」つにいては、 img 要素を出力したければ IMG element を、 CSS の list-style-type を出力したければ CSS list rule-set を選択します。
最後に「3. 出力方法を選択してください」で、 Save to file ボタンをクリックすると変換した内容が HTML ファイルに出力され、 Copy to clipboard ボタンをクリックすると、変換した内容がクリップボードにコピーされます。

※クリップボードにコピーした内容は、実行した画面を閉じると消去されます。

img 要素の alt テキストを変更したい場合は、ソースコード png_b64_conv.py の IMG_ALT_TEXT の値を書き換えてください。