はじめに
こんばんわ！
まだまだ暑い日が続きますね。
未だに半袖と半ズボンスタイルを貫いています
初心者プログラマーのジンです！
今日は作りたいプロダクトにOpenCV.jsを
使ってみて詰まったことなどを共有したいです。
よければ見ていただけると嬉しいです！
OpenCVって？？
OpenCV（Open Source Computer Vision Library）は、画像処理やコンピュータビジョンに特化したライブラリです。PythonやC++、Javaなどで利用でき、主に画像認識、物体検出、顔検出、画像変換、特徴量抽出、動画解析などのさまざまなタスクに対応しています。特に、機械学習やAIアプリケーションで画像データを処理する際に非常に役立ちます。無料です！
導入まで（事前説明）
今回Reactプロダクトで、
写真に写っているあれは何㎝のものなのか。などをわかるようにするアプリを作っています。
基準となる千円札を目的物と一緒に写真を撮り
「千円札がこう歪んでるから同じ平行線上にある目的物はこれくらいの長さ。」
を計算させるのが目的です。
平面で写真を撮れるものであればもっと簡単だったのですが、ほとんどの写真は斜めであったり立体に考える必要があると思いましたのでOpenCV内のパース補正という機能を使って奥行を計算しています。
導入途中
今回フロントで作成していたので、
サーバーサイドの技術は考えていなかったのですが、
文献調べると、
Python ＋ OpenCVや
C++ + OpenCVなど
サーバー言語との組み合わせ文献が多い。
しかし
なにやらブラウザで読み込める
OpenCV.jsがあるとのこと。
バージョンもあるので最新は上記公式ドキュメント確認してください。
Web上で読み込むだけで使えます！
が、、、、
下に続く。
結果（詰み→解決策）
結果として機能を作り、いざ試してみたのですが、
立体で空間を
把握する機能だからか、
計測すると画面がフリーズしてしまいました。
よくよく調べるとパース補正計算時画像のピクセルでの計算をしているので
画質のいい写真であればあるほど、
複雑な計算がいる様子。
しかしこのアプリを使うとしたら、
携帯で撮った写真がほぼ占めると思ったので、
諦められませんでした。
色々試行錯誤していきついた結果、
APIとしてPythonを使用し、
OpenCV.jsではなく普通のOpenCVとして
Python上で計算させると、
画面もフリーズせず期待通りの結果が出ました。
事例を伝えたかったので今回コードは長くなるので省略します。
最後に
Web上で簡単に読み込めるOpenCV.jsは
簡単な計算であれば実装できそうですが、
立体での奥行きも含めた画像処理などをさせようとすると重いみたいですね。
苦手だからと逃げず、
おとなしくサーバー言語でAPIを作れ。
そう身にしみた経験でした。
同じようにフリーズして試行錯誤している方に届くとうれしいです！