ほんじゃらねっと

食と自転車とダイエットとたまにプログラミング

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

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

前回の記事で

blog.honjala.net

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

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

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

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

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

docs.opencv.org

OpenCV.jsを準備する

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

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

docs.opencv.org

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

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

https://docs.opencv.org/3.4/opencv.js

画像処理してみる

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

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

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

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

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

https://pirosuke.github.io/tools/web_image_convert/

f:id:piro_suke:20190429145208p:plain

案外うまくいきました。

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

Image Convert With OpenCV.js

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

おわり

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

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

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

詳解 OpenCV 3 ―コンピュータビジョンライブラリを使った画像処理・認識

詳解 OpenCV 3 ―コンピュータビジョンライブラリを使った画像処理・認識

  • 作者: Gary Bradski,Adrian Kaehler,松田晃一,小沼千絵,永田雅人,花形理
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2018/05/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る