前提・実現したいこと
javascriptでopencvの顔検出(最終的には目を)をしたいと思っています。
とりあえずサンプルを使おうとしているのですが、
loadでxmlの読み込みが失敗して次へいけません
環境
レンタルサーバー(coreserver)
chromeで表示し確認
発生している問題・エラーメッセージ
classifier.load('haarcascade_eye.xml');
の復帰値がfalseになり、
以降の処理がキチンと動かない
該当のソースコード
javascript
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>Hello OpenCV.js</title> 6</head> 7<body> 8<h2>OpenCV sample</h2> 9 <script src="https://docs.opencv.org/3.4/utils.js" type="text/javascript"></script> 10<p id="status">OpenCV.js is loading...</p> 11<div> 12 <div class="inputoutput"> 13 <img id="imageSrc" alt="No Image" /> 14 <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div> 15 </div> 16 <br> 17 <form name="test"> 18 <input type="button" value="grayscale" onClick="grayscale()"> 19 <input type="button" value="findface" onClick="findface()"> 20 <br> 21 </form> 22 <br> 23 <div class="inputoutput"> 24 <canvas id="canvasOutput" ></canvas> 25 <div class="caption">canvasOutput</div> 26 </div> 27</div> 28<script type="text/javascript"> 29let imgElement = document.getElementById('imageSrc'); 30let inputElement = document.getElementById('fileInput'); 31inputElement.addEventListener('change', (e) => { 32 imgElement.src = URL.createObjectURL(e.target.files[0]); 33}, false); 34function grayscale(){ 35 let mat = cv.imread(imgElement); 36 var dst = new cv.Mat(); 37 cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY, 0); 38 cv.imshow('canvasOutput', dst); 39 mat.delete(); 40 dst.delete(); 41} 42function findface(){ 43 console.log("findface!"); 44 let mat = cv.imread(imgElement); 45 var dst = new cv.Mat(); 46 let classifier = new cv.CascadeClassifier(); 47 let faces = new cv.RectVector(); 48 let result = classifier.load('haarcascade_eye.xml'); 49 50 console.log(result); 51 console.log("findface2!"); 52 var gray = new cv.Mat(); 53 cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY, 0); 54 cv.imshow('canvasOutput', gray); 55 // detect faces. 56 console.log("findface3!"); 57 classifier.detectMultiScale(gray, faces, 1.1, 3, 0); 58 // draw faces. 59 console.log("findface4!"); 60 61 for (let i = 0; i < faces.size(); ++i) { 62 console.log(i); 63 let face = faces.get(i); 64 let point1 = new cv.Point(face.x, face.y); 65 let point2 = new cv.Point(face.x + face.width, face.y + face.height); 66 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); 67 } 68 console.log("findface5!"); 69 cv.imshow('canvasOutput', dst); 70 71 cv.cvtColor(mat, dst, cv.COLOR_RGBA2GRAY, 0); 72 cv.imshow('canvasOutput', dst); 73 mat.delete(); 74 dst.delete(); 75} 76function onOpenCvReady() { 77 document.getElementById('status').innerHTML = 'OpenCV.js is ready.'; 78} 79</script> 80<script async src="https://docs.opencv.org/3.4.1/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script> 81</body> 82</html> 83
xmlは大きいので、リンクにします
https://drive.google.com/open?id=1y07HhQlaX_ro7uaWupUZHR5SO0PSFitO
https://drive.google.com/open?id=1raVceLzYhZK0_Uyy-PNHRbn3CDnY0aJ8
試したこと
haarcascade_eye.xmlは同じフォルダに置いています。
haarcascade_frontalface_default.xmlなども、同じように置いて試しましたが結果は同じです。
バージョン違いも疑いましたが、
4.4.1,3.4.8,3.4.0のものを置いても同じでした。
絶対パス指定(https://~)もしてみましたがNG
パス指定の失敗はないと思っていますが、
javascriptは慣れていないので100%否定はできていない
falseしか出てこないので、
問題の切り分けもできず困っています。
(切り分けができれば、まだやりようはあると思うのですが、お手上げです)
loadの地点ではエラーは出ておらず、
以降のところでエラー(empty)があるので、読み込み失敗と見ています。
error
1cam4.html:43 findface! 2cam4.html:52 false 3cam4.html:53 findface2! 4cam4.html:58 findface3! 5opencv.js:21 OpenCV(3.4.1) Error: Assertion failed (!empty()) in detectMultiScale, file /build/master-contrib_docs-lin64/opencv/modules/objdetect/src/cascadedetect.cpp, line 1698 6shell_printErr @ opencv.js:21 7opencv.js:21 Uncaught 6397064 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch. 8___cxa_throw @ opencv.js:21 9kD @ opencv.js:25 10iD @ opencv.js:25 11dsa @ opencv.js:34 12yr @ opencv.js:25 13XB @ opencv.js:25 14lic @ opencv.js:37 15dynCall_viiiidii_4 16CascadeClassifier$detectMultiScale 17(anonymous) @ opencv.js:21 18findface @ cam4.html:59 19onclick @ cam4.html:19 20
よろしくお願いいたします。
あなたの回答
tips
プレビュー