opencv.js 4.4.0 知らないうちにopencvがjavascriptでも使えるようになっていた。
1. デモ 画像ファイルを選択すると画像処理された結果が表示される。
オリジナル画像 グレイスケール化 二値化 エッジ検出 の4つ。
opencv.js 読み込み中... まだ押せない↓
1. オリジナル画像
2. グレイスケール化
3. 二値化
4. エッジ検出
2. 実装 2.1. ダウンロード 全ては公式に書いてある。
ネットの情報だと自分でビルドしないといけないなどと書いてあったが、公式のチュートリアルにはビルド済みをダウンロードするように書いてあった。
Releases · opencv/opencv
Open Source Computer Vision Library. Contribute to opencv/opencv development by …
リリースページ最新版(当時は4.4.0)のopencv-4.4.0-docs.zipをダウンロード、展開。opencv.jsだけが使うやつ。7.88MB、重い。
2.2. 動かす 実際にHTMLに書いてブラウザで動かす方法。
OpenCV: OpenCV.js Tutorials
2.2.1. opencv.jsを読み込む 必要最低限のopencv.js読み込みはこれ↓
1 <script src="opencv.js"></script>
ここにasyncを追加して読み込みを遅らせる。opencv.jsは重いので先に読み込むと画面表示が遅くなる。
1 <script async src="opencv.js"></script>
opencv.jsが読み込まれたことが分かるように読み込み完了時のアクションを追加する。onload="onOpenCvReady();"とすると、読み込み完了時にonOpenCvReady()関数が実行される。
1 2 3 4 5 6 7 8 <script async src="opencv.js" onload="onOpenCvReady();"></script> <script> // 関数1 opencv.jsが読み込まれた後に実行される function onOpenCvReady() { document.getElementById('status').innerHTML = "opencv.js 読み込み終了 もう押せる↓"; selectedFile.addEventListener("change", uploadImage, false); } </script>
2.2.2. 画像を読み込む HTML中にファイル読み込みボタンを作る。
1 <input type="file" id="selectedFile" name="file" />
javascript上で読み込んだファイルから画像データを取得。srcに入れる。
1 2 3 4 5 let inputImg = document.getElementById("inputImg"); let selectedFile = document.getElementById("selectedFile"); inputImg.src = URL.createObjectURL(selectedFile.files[0]); let src = cv.imread(inputImg);
2.2.3. 画像処理を行う 画像処理後の画像を入れるための変数outを用意する。cv.cvtColor()によってsrcのグレイスケール化を行い、結果をoutに入れている。https://docs.opencv.org/4.0.0/
1 2 let out = new cv.Mat(); cv.cvtColor(src, out, cv.COLOR_RGBA2GRAY, 0);
2.2.4. 画像を表示する あらかじめHTML上にcanvasを用意しておく。
1 <canvas id="canvas1"></canvas>
javascript上でさっき作ったoutをcanvasに表示する。
1 cv.imshow("canvas1", out);
2.2.5. 変数を削除する メモリを解放するために使い終わった変数を削除する。
1 2 src.delete(); out.delete();
3. コード 今回のデモで使用したコード。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <p id="status">opencv.js 読み込み中... まだ押せない↓</p> <div><input type="file" id="selectedFile" name="file" /></div> <div><img id="inputImg" src="" /></div> <div class="caption">1. オリジナル画像</div> <canvas id="canvas01" height="0"></canvas> <div class="caption">2. グレイスケール化</div> <canvas id="canvas02" height="0"></canvas> <div class="caption">3. 二値化</div> <canvas id="canvas03" height="0"></canvas> <div class="caption">4. エッジ検出</div> <script> let inputImg = document.getElementById("inputImg"); let selectedFile = document.getElementById("selectedFile"); // 関数1 opencv.jsが読み込まれた後に実行される function onOpenCvReady() { document.getElementById("status").innerHTML = "opencv.js 読み込み終了 もう押せる↓"; selectedFile.addEventListener("change", uploadImage, false); } // 関数2 「ファイル選択」 選択された画像を読み込む async function uploadImage() { inputImg.src = URL.createObjectURL(selectedFile.files[0]); } // 関数3 画像を読み込んだ後に実行される inputImg.onload = function() { let src = cv.imread(inputImg); let out1 = new cv.Mat(); let out2 = new cv.Mat(); let out3 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); let lines = new cv.Mat(); // グレイスケール化 cv.cvtColor(src, out1, cv.COLOR_RGBA2GRAY, 0); cv.imshow("canvas01", out1); // 二値化 cv.threshold(out1, out2, 0, 255, cv.THRESH_BINARY + cv.THRESH_OTSU); cv.imshow("canvas02", out2); // エッジ検出 cv.Canny(out1, out1, 150, 200); cv.HoughLinesP(out1, lines, Math.PI / 180, 2, 0, 0); // Hough検出した線を描く for (let i = 0; i < lines.rows; ++i) { let startPoint = new cv.Point(lines.data32S[i * 4], lines.data32S[i * 4 + 1]); let endPoint = new cv.Point(lines.data32S[i * 4 + 2], lines.data32S[i * 4 + 3]); cv.line(out3, startPoint, endPoint, new cv.Scalar(255, 255, 255)); } cv.imshow("canvas03", out3); src.delete(); out1.delete(); out2.delete(); lines.delete(); }; </script> <script async src="/../codes/opencv.js" onload="onOpenCvReady();"></script>
