photonコマンドで画像処理のレポート用に画像一覧HTMLを作る

動機

画像処理、コンピュータビジョンの研究開発をしていると処理結果を一覧するレポートの出力をするシチュエーションが多い。

• Microsoft OfficeやOpenOffice / LibreOfficeに手作業で画像を並べるのはしんどい
• restructuredText / markdownを手書きも結構めんどう
• 上記フォーマットやHTMLを出力するスクリプトを自作するのもメンテナンスが大変だし、作業ごとに項目が異なるので大変

そこでHTML画像アルバム生成コマンド photon を使用して画像一覧を作成する。

HTML画像アルバム生成コマンド

Ubuntuのsynapticで検索すると以下の3つのコマンドが見つかった

• album
• imageindex
• photon

"image html"で簡単に検索しただけなので他にも便利なツールはあるかも知れない。上の3つを試したところ、photonが行数、列数の指定やデフォルトの出力先の使い勝手が良いのでphotonについて記述する。

photonコマンド

# 画像のあるディレクトリを ./images として
photon ./images

上記のように実行すればデフォルトの出力ディレクトリ ./photos 以下にindex.htmlなどアルバムのHTMLが作成される。

主なオプション

自分がよく使うオプションをヘルプから抜粋する。

-d NUM  --display-columns=NUM   列数の指定
-l NUM  --display-lines=NUM     行数の指定
-o NAME --output-directory=NAME 出力ディレクトリの指定
-s LIST --sizelist=LIST         画像サイズの指定。1024x786という幅x高さの形式で指定する。0でオリジナルサイズ。デフォルトは"0,1024x768,800x600,640x480"。
-z      --compress              画像を圧縮する（デフォルトでは原画像を出力ディレクトリにコピーする）

自分の使い方

実験にて以下のように元画像1枚につき4種類の画像が出力されるとする。

./images/test_image1.binarize.png 
./images/test_image1.edge.png
./images/test_image1.gray.png
./images/test_image1.origin.png
./images/test_image2.binarize.png 
./images/test_image2.edge.png
./images/test_image2.gray.png
./images/test_image2.origin.png
./images/test_image3.binarize.png 
./images/test_image3.edge.png
./images/test_image3.gray.png
./images/test_image3.origin.png
.
.
.

# -d 4 : 列数4
# -l 300 : 行数300（1ページに収めたいため十分大きな値にしておく。行数が足りない場合、複数ページのHTMLが生成される）
# -z : 元画像がpngなのでレポートサイズ縮小のために圧縮をする
# -s 0 : レポートにつき縮小画像は不要なため0指定でオリジナルサイズのみにしておく（サムネイルは別途作成される）
# -o report : reportというディレクトリに出力する
#  ./images : ./imagesディレクトリ以下の画像のアルバムを生成する
photon -d 4 -l 300 -z -s 0 -o report ./images

画像の並び順は単純にファイル名順になる。実験の1セットのような扱いはできないため、画像のファイル名と列数指定で対応する（元ファイル名-処理名.pngのようにする）。処理の流れを見やすくするためには行内の順序を整えるために処理名に番号を振る必要もある。

スキン機能（まだ使っていない）

オリジナルのスキンを指定することで出力の見た目をカスタマイズできる。

Ubuntuのaptでインストールした場合、デフォルトのスキンは /usr/share/photon/templates 以下に photonv1 というディレクトリとして配置される。まずはこれを $HOME/.photon/templates/ 以下に任意の名前でコピーしてカスタマイズすれば良い。

mkdir -p $HOME/.photon/templates
cp -r /usr/share/photon/templates/photonv1 $HOME/.photon/templates/my_skin

スキンは以下のファイルで構成される。

• common_footer.html : 共通のフッタ
• image.html : 個別の画像のページ
• index.html : 画像一覧のページ
• movie.html : 動画ファイルのページ

コードを見る限り独自パーサのフォーマットのようだが、表示位置の調整などの簡単なカスタマイズならデフォルトのテンプレートを見れば雰囲気はつかめると思う。

作例

仕事でしか使わないのでOpenCVで適当にプログラムを作って作例とする。

左から原画像、グレイスケール、Cannyエッジ抽出、バイラテラルフィルタ。

横幅を削減するために、普段はスキンをカスタマイズしてファイル名を表示しないようにしている。