cat image.png | filter | gyazo

画像を処理して遊んだり開発したりするときのtipsを共有します

自己紹介

@uiureo ウイウ

ネオ目黒ライン NEO MEGURO LINE

最近、ネオ目黒ラインというサービスを作りました

https://mesen-dot-uiu-server.appspot-preview.com/

#NEOMEGUROLINE

https://github.com/uiureo/neo-meguro-line

高速に試行錯誤したい

画像を処理するプログラムを書いていると、良い感じの画像が出てくるまで何度も試行錯誤します。

たとえば、ネオ目黒ラインではpythonからopencvを呼び出して目線を黒く描いて出力します。顔が傾いている場合などでもいい感じに目線が描かれるまで何度もコードを書き直して実行する必要がありました。

こういうとき、人間はプログラムのなかで特定のファイル名で保存したり、もうちょっと賢い方法だと標準出力に出力したりします。

python convert.py lenna.png # result.png
python convert.py lenna.png > lenna-black-line.png

しかし、画像ファイルに保存して毎回わざわざfinderを開いたりするのは面倒です。

imgcat

iTerm2にはターミナル内に画像を表示する機能があります

cat lenna.png | imgcat

imgcatは標準入力から画像データを読み込んでターミナル内に直接表示します。これを使えば画像を保存することなくその場で結果を確認できるので高速に試行錯誤できます。

python convert.py lenna.png | imgcat

当然ファイルを保存したいときには、標準出力にファイル名を指定するとよい。もしくはiTerm内で右クリックしてもいい。

python convert.py lenna.png > cool-lenna.png

画像を標準出力に出力するようにしておくと、pipeしてfilterを組み合わせることでもっと自由な処理ができます。

curl

Gyazoのupload apiはとてもシンプルなのでcurlを使って簡単に画像をアップロードできます。

curl -sL -X POST upload.gyazo.com/upload.cgi -F "id=<$HOME/Library/Gyazo/id" -F '[email protected]'
# https://gyazo.com/b624b9794a4e3caead1df7689b818ec2

curlは送るデータを標準入力から読むこともできるので、pipeでつなげるとさっきの画像をgyazoにアップロードできます。

python convert.py lenna.png \
  | curl -sL -X POST upload.gyazo.com/upload.cgi -F "id=<$HOME/Library/Gyazo/id" -F 'imagedata=@-' \
  | xargs open

gyazo-cli というnpmモジュール使うともっとカジュアルに使えます。

python convert.py lenna.png | gyazo --stdin

NEO MEGURO LINE again

NEO MEGURO LINEのAPIは、すごく素朴なので画像を multipart/form-data で投げると、目線を入れた結果が返ってきます。

cat ~/Downloads/lenna.png | curl -sL -X POST https://mesen-dot-uiu-server.appspot-preview.com -F 'image=@-' | imgcat

しかし、NEO MEGURO LINEでは画像保存されません。友達に共有したい気持ちをどうするとよいのでしょうか。そのまま出力をgyazoに流せばええやん。

cat ~/Downloads/lenna.png \
  | curl -sL -X POST https://mesen-dot-uiu-server.appspot-preview.com -F 'image=@-' \
  | gyazo --stdin \
  | xargs open

gyazo便利じゃん

なんでも叩きたくなる

みんな大好きimagemagickのconvertコマンドも標準入出力とうまく連携できます。たとえば、画像のサムネイルをこのようにして作れます。

cat lenna.png | convert -resize 200x200 - png:- | imgcat

さっきの画像をかっこよくしてみます。

cat ~/Downloads/lenna.png \
  | curl -sL -X POST https://mesen-dot-uiu-server.appspot-preview.com -F 'image=@-' \
  | convert - jpg:- \
  | sed "s/1/2/g" \
  | gyazo --stdin \
  | xargs open

もっと叩きたい

動画をgifに変換したい

ffmpeg -i input.mp4 -r 10 -f image2pipe -vcodec ppm - \
  | convert -layers Optimize - gif:- \
  | gifsicle -O3 --multifile - > output.gif

まとめ

画像処理にpipeを組み合わせると便利という例を紹介しました。 unix pipeをうまく使ってfilterを組み合わせていくことで、強力なプログラムを簡潔に書くことができるので便利です。

uiur/0.md