OpenCVがブラウザから利用できるようになったので試してみました。
先人たちの話によるとOpenCV.jsのビルドが必要だそうです。面倒くさい
とりあえずサクッと試せる方法がないか探してみました。
TL;DR
- https://docs.opencv.org にあるので拝借
-
<script src="https://docs.opencv.org/3.4.1/opencv.js"></script>を追加
##NPM
それっぽいパッケージはありますが、Node.js用なので違いますね...
https://www.npmjs.com/package/opencv4nodejs
公式が提供するパッケージは無さそうでした。
公式ドキュメント
とりあえずドキュメント見ると何かわかるかもしれません。
https://docs.opencv.org/3.4.1/df/d0a/tutorial_js_intro.html
ビルド方法はこれです。
https://docs.opencv.org/3.4.1/d4/da1/tutorial_js_setup.html
$ git clone https://github.com/opencv/opencv.git
$ cd opencv
$ python ./platforms/js/build_js.py build_wasm --build_wasm
WASMで動く！すごい！
...いや、そうじゃないんですよね。
自分でビルドとかせずちょっと触ってみたかっただけなんですよ。
チュートリアル
チュートリアルのページではOpenCV.jsが動いているようです。
あー、はいはい。
（gzip圧縮して3MBとか...）
このファイルを読み込めば良さそうです。
結果
<script src="https://docs.opencv.org/3.4.1/opencv.js"></script>を追加すればCodePenでもOpenCV.jsを動かすことができます。
↓読み込んだ画像のグレースケール変換のサンプルを書いてみました。
See the Pen OpenCV.js by puku0x (@puku0x) on CodePen.
読み込みが少し重いですが、ブラウザ上でOpenCVが動きました👍