OpenCV.jsでインストール不要な画像ぬりえ化ツールをつくる

OpenCV、インストール難しすぎじゃね？

前回の記事で

Node.jsでOpenCVを使うことに成功したわけですが、 OpenCVはとにかくインストールでうまくいかないことが多くて、 Macでどうにかうまく動いてもLinuxにインストールしようとするとまたエラーでつまづいたりして、うんざりしました。

ImageMagickなんて適当にyum installするだけでインストールできるのに！

乗り換えたろか！と思いつつ、OpenCVはやっぱり使ってみたい。

ブラウザで動くらしいOpenCV.jsなら一度用意してしまえば環境構築で二度と苦労しなくて済むのでは？

ということで今回はOpenCV.jsでの画像処理を試してみました。

OpenCV.jsを準備する

OpenCV.jsはブラウザ上で動作するので、 Mac上だろうがWindows上だろうが動いてくれるはずです。

ダウンロードして使うぞ！と思ってもそこはさすがOpenCV、そう簡単に使えるようにはなっておらず、チュートリアルを見ると自分でビルドして用意するように書いてあります。

そしてこのビルドがまたなんやかんやエラーでうまくいかなかったりします。ブラウザで動くならビルド済みのものを配布してくれても良いのではないか、と思いますが、がんばります。

どうしてもビルドがうまくいかない場合は、本家のチュートリアルで使用されているjsファイルを拝借すればビルド済みのものが手に入ります。これを配布してくれると助かるのですが。

どうにかOpenCV.jsの準備ができたので、

試しに前回作った線画でぬりえ作成プログラムをブラウザで動くように作り変えてみます。

OpenCV.jsを使用した処理の流れや使用できる関数は基本的にPython版のOpenCVと同じですが、画像の読み込みと出力はファイルから直接ではなく、 imgタグ、videoタグ、canvasタグに対して行うことになります。

今回は画像ファイルを選択し、それをcanvas上でグレースケール化したり線画化したりして、最後に変換した画像をダウンロードできるようにしてみます。

完成版はこんな感じです。（リンク先で実際に選択したファイルを変換してダウンロードできます）

f:id:piro_suke:20190429145208p:plain

案外うまくいきました。

Javascriptのソースはこんな感じです。

ダウンロード時に元画像と同じサイズでダウンロードしたいので、表示用とダウンロード用にcanvasとimgを用意し、ダウンロード用は非表示にしてます。

これで、わざわざOpenCVをインストールしなくても、 OpenCVの機能を使用して画像を変換できるようになりました。

クライアントサイドだけで処理が完結するので、静的なWebページとJSファイルを用意するだけで機能を提供できるのが素晴らしいです。

ローカルアプリのようにフォルダを選択して一括でフォルダ内の画像を変換する、ということはできませんが、 Electronやサーバ側処理を作り込めば実現できそうです。