# cat image.png | filter | gyazo
画像を処理して遊んだり開発したりするときのtipsを共有します

## 自己紹介
[@uiureo](twitter.com/uiureo) ウイウ

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

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

[![](https://i.gyazo.com/b65e3a9edef6ca8a2d8f9b35be0e1ac9.png)](https://mesen-dot-uiu-server.appspot-preview.com/)

[#NEOMEGUROLINE](https://twitter.com/search?q=%23NEOMEGUROLINE)

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

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

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

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

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

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

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

```sh
cat lenna.png | imgcat
```

![](https://i.gyazo.com/1f9dd1347871e152084fb88295923a50.png)

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

```sh
python convert.py lenna.png | imgcat
```

![](https://i.gyazo.com/9d7158a3699dd8cee507a55cb729e31e.png)

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

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

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

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

```sh
curl -sL -X POST upload.gyazo.com/upload.cgi -F "id=<$HOME/Library/Gyazo/id" -F 'imagedata=@lenna.png'
# https://gyazo.com/b624b9794a4e3caead1df7689b818ec2
```

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

```sh
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](https://github.com/uiureo/gyazo-cli) というnpmモジュール使うともっとカジュアルに使えます。

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

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

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

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

```sh
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コマンドも標準入出力とうまく連携できます。
たとえば、画像のサムネイルをこのようにして作れます。

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

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

```sh
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
```

![](https://gyazo.com/7b9763093a8f1191d02647678110efa8.png)

## もっと叩きたい
動画をgifに変換したい

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


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

## リンク
* https://github.com/uiureo/gyazo-cli
* http://qiita.com/uiureo/items/be92c8fdaeaec9b506e4
* https://www.iterm2.com/documentation-images.html