OpenCv.js（图像处理）学习历程

opencv.js官网

4.5.0文档

以下内容整理于opencv.js官网。

简介

OpenCV由Gary Bradski于1999年在英特尔创建。第一次发行是在2000年。OpenCV支持c++、Python、Java等多种编程语言，支持Windows、Linux、Os X、Android、iOS等平台。基于CUDA和OpenCL的高速GPU操作接口也在积极开发中。OpenCV.js将OpenCV带到开放的web平台，并使JavaScript程序员可以使用它。

图片处理 

读取图片

readImage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>读取图片</h2>
<p id="status">OpenCV.js is loading...</p>
<div><div class="inputoutput"><img id="imageSrc" alt="No Image" /><div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div></div><div class="inputoutput"><canvas id="canvasOutput" ></canvas><div class="caption">canvasOutput</div></div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {let mat = cv.imread(imgElement);cv.imshow('canvasOutput', mat);mat.delete();
};
var Module = {// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitializedonRuntimeInitialized() {document.getElementById('status').innerHTML = 'OpenCV.js is ready.';}
};
</script>
<!-- <script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script> -->
<script async src="opencvjs/opencv.js" type="text/javascript"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
</body>
</html>

浏览器运行。 

灰度图

blackAWhite.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Adaptive Threshold Example</title>
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>IMAGE</h2>
<p></p>
<div>
<div class="control"><button id="tryIt" disabled>Start</button></div>
<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false"></textarea>
<p class="err" id="errorMessage"></p>
</div>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
// To distinguish the input and output, we graying the image.
// You can try different conversions.
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutput', dst);
src.delete();
dst.delete();
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');
utils.loadImageToCanvas('lena.jpg', 'canvasInput');
utils.addFileInputHandler('fileInput', 'canvasInput');let tryIt = document.getElementById('tryIt');
tryIt.addEventListener('click', () => {utils.executeCode('codeEditor');
});utils.loadOpenCv(() => {tryIt.removeAttribute('disabled');
});
</script>
</body>
</html>

浏览器运行。 

 

 阈值

inRangeImage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2></h2>
<p id="status">OpenCV.js is loading...</p>
<div><div class="inputoutput"><img id="imageSrc" alt="No Image" /><div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div></div><div class="inputoutput"><canvas id="canvasOutput" ></canvas><div class="caption">canvasOutput</div></div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {let src = cv.imread('imageSrc');let dst = new cv.Mat();let low = new cv.Mat(src.rows, src.cols, src.type(), [0, 0, 0, 0]);let high = new cv.Mat(src.rows, src.cols, src.type(), [150, 150, 150, 255]);// You can try more different parameterscv.inRange(src, low, high, dst);cv.imshow('canvasOutput', dst);src.delete(); dst.delete(); low.delete(); high.delete();
};
var Module = {// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitializedonRuntimeInitialized() {document.getElementById('status').innerHTML = 'OpenCV.js is ready.';}
};
</script>
<script async src="opencvjs/opencv.js" type="text/javascript"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
</body>
</html>

 

其它 

imageTemplate.html

 修改框内的代码即可对图片进行不同的操作，此代码适用于大部分的官网中有关图片操作的代码。 

视频处理 

 均值漂移


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CamShift Example</title>
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="control"><button id="startAndStop" disabled>Start</button></div>
<textarea class="code" rows="29" cols="100" id="codeEditor" spellcheck="false"></textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<video id="videoInput" width="320" height="240" muted loop></video>
</td>
<td>
<canvas id="canvasOutput" width="320" height="240"></canvas>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="caption">videoInput</div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let cap = new cv.VideoCapture(video);// take first frame of the video
let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
cap.read(frame);// hardcode the initial location of window
let trackWindow = new cv.Rect(150, 60, 63, 125);// set up the ROI for tracking
let roi = frame.roi(trackWindow);
let hsvRoi = new cv.Mat();
cv.cvtColor(roi, hsvRoi, cv.COLOR_RGBA2RGB);
cv.cvtColor(hsvRoi, hsvRoi, cv.COLOR_RGB2HSV);
let mask = new cv.Mat();
let lowScalar = new cv.Scalar(30, 30, 0);
let highScalar = new cv.Scalar(180, 180, 180);
let low = new cv.Mat(hsvRoi.rows, hsvRoi.cols, hsvRoi.type(), lowScalar);
let high = new cv.Mat(hsvRoi.rows, hsvRoi.cols, hsvRoi.type(), highScalar);
cv.inRange(hsvRoi, low, high, mask);
let roiHist = new cv.Mat();
let hsvRoiVec = new cv.MatVector();
hsvRoiVec.push_back(hsvRoi);
cv.calcHist(hsvRoiVec, [0], mask, roiHist, [180], [0, 180]);
cv.normalize(roiHist, roiHist, 0, 255, cv.NORM_MINMAX);// delete useless mats.
roi.delete(); hsvRoi.delete(); mask.delete(); low.delete(); high.delete(); hsvRoiVec.delete();// Setup the termination criteria, either 10 iteration or move by atleast 1 pt
let termCrit = new cv.TermCriteria(cv.TERM_CRITERIA_EPS | cv.TERM_CRITERIA_COUNT, 10, 1);let hsv = new cv.Mat(video.height, video.width, cv.CV_8UC3);
let hsvVec = new cv.MatVector();
hsvVec.push_back(hsv);
let dst = new cv.Mat();
let trackBox = null;const FPS = 30;
function processVideo() {try {if (!streaming) {// clean and stop.frame.delete(); dst.delete(); hsvVec.delete(); roiHist.delete(); hsv.delete();return;}let begin = Date.now();// start processing.cap.read(frame);cv.cvtColor(frame, hsv, cv.COLOR_RGBA2RGB);cv.cvtColor(hsv, hsv, cv.COLOR_RGB2HSV);cv.calcBackProject(hsvVec, [0], roiHist, dst, [0, 180], 1);// apply camshift to get the new location[trackBox, trackWindow] = cv.CamShift(dst, trackWindow, termCrit);// Draw it on imagelet pts = cv.rotatedRectPoints(trackBox);cv.line(frame, pts[0], pts[1], [255, 0, 0, 255], 3);cv.line(frame, pts[1], pts[2], [255, 0, 0, 255], 3);cv.line(frame, pts[2], pts[3], [255, 0, 0, 255], 3);cv.line(frame, pts[3], pts[0], [255, 0, 0, 255], 3);cv.imshow('canvasOutput', frame);// schedule the next one.let delay = 1000/FPS - (Date.now() - begin);setTimeout(processVideo, delay);} catch (err) {utils.printError(err);}
};// schedule the first one.
setTimeout(processVideo, 0);
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');
let canvasOutput = document.getElementById('canvasOutput');
let canvasContext = canvasOutput.getContext('2d');startAndStop.addEventListener('click', () => {if (!streaming) {utils.clearError();videoInput.play().then(() => {onVideoStarted();});} else {videoInput.pause();videoInput.currentTime = 0;onVideoStopped();}
});function onVideoStarted() {streaming = true;startAndStop.innerText = 'Stop';videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);utils.executeCode('codeEditor');
}function onVideoStopped() {streaming = false;canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);startAndStop.innerText = 'Start';
}utils.loadOpenCv(() => {videoInput.addEventListener('canplay', () => {startAndStop.removeAttribute('disabled');});videoInput.src = 'video/cup.mp4';
});
</script>
</body>
</html>

背景差分 

backgroundSubtraction.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="control"><button id="startAndStop" disabled>Start</button></div>
<textarea class="code" rows="29" cols="100" id="codeEditor" spellcheck="false"></textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<video id="videoInput" width="320" height="240" muted></video>
</td>
<td>
<canvas id="canvasOutput" width="320" height="240"></canvas>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="caption">videoInput</div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let cap = new cv.VideoCapture(video);let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let fgbg = new cv.BackgroundSubtractorMOG2(500, 16, true);const FPS = 30;
function processVideo() {try {if (!streaming) {// clean and stop.frame.delete(); fgmask.delete(); fgbg.delete();return;}let begin = Date.now();// start processing.cap.read(frame);fgbg.apply(frame, fgmask);cv.imshow('canvasOutput', fgmask);// schedule the next one.let delay = 1000/FPS - (Date.now() - begin);setTimeout(processVideo, delay);} catch (err) {utils.printError(err);}
};// schedule the first one.
setTimeout(processVideo, 0);</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');startAndStop.addEventListener('click', () => {if (!streaming) {utils.clearError();videoInput.play().then(() => {onVideoStarted();});} else {videoInput.pause();videoInput.currentTime = 0;onVideoStopped();}
});function onVideoStarted() {streaming = true;startAndStop.innerText = 'Stop';videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);utils.executeCode('codeEditor');
}function onVideoStopped() {streaming = false;startAndStop.innerText = 'Start';
}videoInput.addEventListener('ended', () => {onVideoStopped();
});utils.loadOpenCv(() => {videoInput.addEventListener('canplay', () => {startAndStop.removeAttribute('disabled');});videoInput.src = 'video/box.mp4';
});
</script>
</body>
</html>

卡纳德方法

LucasKanade.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="control"><button id="startAndStop" disabled>Start</button></div>
<textarea class="code" rows="29" cols="100" id="codeEditor" spellcheck="false"></textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<video id="videoInput" width="320" height="240" muted></video>
</td>
<td>
<canvas id="canvasOutput" width="320" height="240"></canvas>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="caption">videoInput</div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let cap = new cv.VideoCapture(video);// take first frame of the video
let frame1 = new cv.Mat(video.height, video.width, cv.CV_8UC4);
cap.read(frame1);let prvs = new cv.Mat();
cv.cvtColor(frame1, prvs, cv.COLOR_RGBA2GRAY);
frame1.delete();
let hsv = new cv.Mat();
let hsv0 = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let hsv1 = new cv.Mat(video.height, video.width, cv.CV_8UC1, new cv.Scalar(255));
let hsv2 = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let hsvVec = new cv.MatVector();
hsvVec.push_back(hsv0); hsvVec.push_back(hsv1); hsvVec.push_back(hsv2);let frame2 = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let next = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let flow = new cv.Mat(video.height, video.width, cv.CV_32FC2);
let flowVec = new cv.MatVector();
let mag = new cv.Mat(video.height, video.width, cv.CV_32FC1);
let ang = new cv.Mat(video.height, video.width, cv.CV_32FC1);
let rgb = new cv.Mat(video.height, video.width, cv.CV_8UC3);const FPS = 30;
function processVideo() {try {if (!streaming) {// clean and stop.prvs.delete(); hsv.delete(); hsv0.delete(); hsv1.delete(); hsv2.delete();hsvVec.delete(); frame2.delete(); flow.delete(); flowVec.delete(); next.delete();mag.delete(); ang.delete(); rgb.delete();return;}let begin = Date.now();// start processing.cap.read(frame2);cv.cvtColor(frame2, next, cv.COLOR_RGBA2GRAY);cv.calcOpticalFlowFarneback(prvs, next, flow, 0.5, 3, 15, 3, 5, 1.2, 0);cv.split(flow, flowVec);let u = flowVec.get(0);let v = flowVec.get(1);cv.cartToPolar(u, v, mag, ang);u.delete(); v.delete();ang.convertTo(hsv0, cv.CV_8UC1, 180/Math.PI/2);cv.normalize(mag, hsv2, 0, 255, cv.NORM_MINMAX, cv.CV_8UC1);cv.merge(hsvVec, hsv);cv.cvtColor(hsv, rgb, cv.COLOR_HSV2RGB);cv.imshow('canvasOutput', rgb);next.copyTo(prvs);// schedule the next one.let delay = 1000/FPS - (Date.now() - begin);setTimeout(processVideo, delay);} catch (err) {utils.printError(err);}
};// schedule the first one.
setTimeout(processVideo, 0);
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');startAndStop.addEventListener('click', () => {if (!streaming) {utils.clearError();videoInput.play().then(() => {onVideoStarted();});} else {videoInput.pause();videoInput.currentTime = 0;onVideoStopped();}
});function onVideoStarted() {streaming = true;startAndStop.innerText = 'Stop';videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);utils.executeCode('codeEditor');
}function onVideoStopped() {streaming = false;startAndStop.innerText = 'Start';
}videoInput.addEventListener('ended', () => {onVideoStopped();
});utils.loadOpenCv(() => {videoInput.addEventListener('canplay', () => {startAndStop.removeAttribute('disabled');});videoInput.src = 'video/box.mp4';
});
</script>
</body>
</html>

人脸识别

人脸识别_照片 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Face Detection Example</title>
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="control"><button id="tryIt" disabled>Start</button></div>
<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false"></textarea>
<p class="err" id="errorMessage"></p>
</div>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let src = cv.imread('canvasInput');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
let faces = new cv.RectVector();
let eyes = new cv.RectVector();
let faceCascade = new cv.CascadeClassifier();
let eyeCascade = new cv.CascadeClassifier();
// load pre-trained classifiers
faceCascade.load('haarcascade_frontalface_default.xml');
eyeCascade.load('haarcascade_eye.xml');
// detect faces
let msize = new cv.Size(0, 0);
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
for (let i = 0; i < faces.size(); ++i) {let roiGray = gray.roi(faces.get(i));let roiSrc = src.roi(faces.get(i));let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,faces.get(i).y + faces.get(i).height);cv.rectangle(src, point1, point2, [255, 0, 0, 255]);// detect eyes in face ROIeyeCascade.detectMultiScale(roiGray, eyes);for (let j = 0; j < eyes.size(); ++j) {let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width,eyes.get(j).y + eyes.get(j).height);cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);}roiGray.delete(); roiSrc.delete();
}
cv.imshow('canvasOutput', src);
src.delete(); gray.delete(); faceCascade.delete();
eyeCascade.delete(); faces.delete(); eyes.delete();
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');
utils.loadImageToCanvas('lena.jpg', 'canvasInput');
utils.addFileInputHandler('fileInput', 'canvasInput');let tryIt = document.getElementById('tryIt');
tryIt.addEventListener('click', () => {utils.executeCode('codeEditor');
});utils.loadOpenCv(() => {let eyeCascadeFile = 'haarcascade_eye.xml';utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {let faceCascadeFile = 'haarcascade_frontalface_default.xml';utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {tryIt.removeAttribute('disabled');});});
});
</script>
</body>
</html>

 

 以上测试图片来自百度。

可以看到，有的地方不是耳朵也会被标记成耳朵，原因是官方的数据集数据比较微小，数据不够准确，但是眼睛的地方能标记出来就已经达到我们的学习目的了，以后可以用更精确的数据集替换效果就会好很多。

人脸识别_相机 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Face Detection Camera Example</title>
<link href="opencvjs/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <h2>Face Detection Camera Example</h2> -->
<div>
<div class="control"><button id="startAndStop">Start</button></div>
<textarea class="code" rows="29" cols="80" id="codeEditor" spellcheck="false"></textarea>
</div>
<p class="err" id="errorMessage"></p>
<div><table cellpadding="0" cellspacing="0" width="0" border="0"><tr><td><video id="videoInput" width=320 height=240></video></td><td><canvas id="canvasOutput" width=320 height=240></canvas></td><td></td><td></td></tr><tr><td><div class="caption">videoInput</div></td><td><div class="caption">canvasOutput</div></td><td></td><td></td></tr></table>
</div>
<script type="text/javascript" src="opencvjs/opencv.js"></script>
<script src="opencvjs/utils.js" type="text/javascript"></script>
<!-- <script src="opencvjs/adapter-5.0.4.js" type="text/javascript"></script> -->
<!-- <script src="opencvjs/known.js" type="text/javascript"></script> -->
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let gray = new cv.Mat();
let cap = new cv.VideoCapture(video);
let faces = new cv.RectVector();
let classifier = new cv.CascadeClassifier();// load pre-trained classifiers
classifier.load('haarcascade_frontalface_default.xml');const FPS = 30;
function processVideo() {try {if (!streaming) {// clean and stop.src.delete();dst.delete();gray.delete();faces.delete();classifier.delete();return;}let begin = Date.now();// start processing.cap.read(src);src.copyTo(dst);cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0);// detect faces.classifier.detectMultiScale(gray, faces, 1.1, 3, 0);// draw faces.for (let i = 0; i < faces.size(); ++i) {let face = faces.get(i);let point1 = new cv.Point(face.x, face.y);let point2 = new cv.Point(face.x + face.width, face.y + face.height);cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);}cv.imshow('canvasOutput', dst);// schedule the next one.let delay = 1000/FPS - (Date.now() - begin);setTimeout(processVideo, delay);} catch (err) {utils.printError(err);}
};// schedule the first one.
setTimeout(processVideo, 0);
</script>
<script type="text/javascript">let utils = new Utils('errorMessage');utils.loadCode('codeSnippet', 'codeEditor');let streaming = false;let videoInput = document.getElementById('videoInput');let startAndStop = document.getElementById('startAndStop');let canvasOutput = document.getElementById('canvasOutput');let canvasContext = canvasOutput.getContext('2d');startAndStop.addEventListener('click', () => {if (!streaming) {utils.clearError();utils.startCamera('qvga', onVideoStarted, 'videoInput');} else {utils.stopCamera();onVideoStopped();}});function onVideoStarted() {streaming = true;startAndStop.innerText = 'Stop';videoInput.width = videoInput.videoWidth;videoInput.height = videoInput.videoHeight;utils.executeCode('codeEditor');}function onVideoStopped() {streaming = false;canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);startAndStop.innerText = 'Start';}utils.loadOpenCv(() => {let faceCascadeFile = 'haarcascade_frontalface_default.xml';utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {// startAndStop.removeAttribute('disabled');});});</script>
</body>
</html>

4.8.0文档

4.8.0相对于4.5.0新增了深度学习模块。

深度神经网络

 

选择相应的model，从对应的链接中得到对应的数据集文件，看第一块代码的配置项是否一致。 

 上传对应的文件，点击运行。

起初认为是时间问题，晚上挂了一段时间，早上起来依旧没有任何数据 ，打开浏览器审查页面，发现有很多报错，无论如何我都得不到想要的结果，这块就放弃了。

补充

完整文件

gitee获取

去掉文本代码区域

在实际开发中我们是不需要textarea的，所以必须去掉它。但是我尝试更改了html文件和js文件，没有成功，所以干脆直接让textarea区域：display:none。

<textarea class="code" rows="9" cols="100" id="codeEditor" spellcheck="false" style="display: none;"></textarea>

参考文献

代码哈士，opencv.js人脸识别简单

opencv.js官网的js文件不是真正的js文件，官网文档里需要建立其环境，这片文章介绍通过爬取得到官方的资源。 

opencv.js官网 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/26819.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java泛型和通配符的使用

java泛型和通配符的使用

泛型机制 本质是参数化类型(与方法的形式参数比较&#xff0c;方法是参数化对象)。 优势:将类型检查由运行期提前到编译期。减少了很多错误。 泛型是jdk5.0的新特性。 集合中使用泛型 总结&#xff1a; ① 集合接口或集合类在jdk5.0时都修改为带泛型的结构② 在实例化集合类时…
阅读更多...
Unity数字可视化学校_昼夜（三）

Unity数字可视化学校_昼夜（三）

1、删除不需要的 UI using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class EnvControl : MonoBehaviour {//UIprivate Button btnTime;private Text txtTime; //材质public List<Material> matListnew Li…
阅读更多...
docker中的jenkins去配置sonarQube

docker中的jenkins去配置sonarQube

docker中的jenkins去配置sonarQube 1、拉取sonarQube macdeMacBook-Pro:~ mac$ docker pull sonarqube:8.9.6-community 8.9.6-community: Pulling from library/sonarqube 8572bc8fb8a3: Pull complete 702f1610d53e: Pull complete 8c951e69c28d: Pull complete f95e4f8…
阅读更多...
Java课设--学生信息管理系统（例2）

Java课设--学生信息管理系统（例2）

文章目录 前提一、运行效果二、代码获取 前言 首先确定自己的JDBC连接数据库已经完成&#xff0c;不懂可以看看其他博主的解析。 我使用的是SQL Server数据库&#xff0c;数据库名称为stu,账号为sa,密码为123456 数据库的表为student表&#xff0c;内容如下&#xff1a; 一、…
阅读更多...
Linux 信号signal处理机制

Linux 信号signal处理机制

Signal机制在Linux中是一个非常常用的进程间通信机制&#xff0c;很多人在使用的时候不会考虑该机制是具体如何实现的。signal机制可以被理解成进程的软中断&#xff0c;因此&#xff0c;在实时性方面还是相对比较高的。Linux中signal机制的模型可以采用下图进行描述。 每个进程…
阅读更多...
Selenium自动化测试框架的搭建

Selenium自动化测试框架的搭建

说 起自动化测试&#xff0c;我想大家都会有个疑问&#xff0c;要不要做自动化测试&#xff1f; 自动化测试给我们带来的收益是否会超出在建设时所投入的成本&#xff0c;这个嘛别说是我&#xff0c;即便是高手也很难回答&#xff0c;自动化测试的初衷是美好的&#xff0c;而测…
阅读更多...
ELK、ELFK日志分析系统

ELK、ELFK日志分析系统

菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09;1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …
阅读更多...
Linux初识网络基础

Linux初识网络基础

目录 网络发展 认识“协议 ” 网络协议 OSI七层模型&#xff1a; TCP/IP五层&#xff08;或四层&#xff09;模型 网络传输基本流程 网络传输流程图&#xff1a; 数据包封装和封用 网络中的地址 认识IP地址&#xff1a; 认识MAC地址&#xff1a; 网络发展 1.独立…
阅读更多...
【云原生】Docker-compose中所有模块学习

【云原生】Docker-compose中所有模块学习

compose模块 模板文件是使用 Compose 的核心&#xff0c;涉及到的指令关键字也比较多。但大家不用担心&#xff0c;这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml&#xff0c;格式为 YAML 格式。 version: "3&quo…
阅读更多...
STM32单片机蓝牙APP宠物自动喂食器定时语音提醒喂食系统设计

STM32单片机蓝牙APP宠物自动喂食器定时语音提醒喂食系统设计

实践制作DIY- GC00162---蓝牙APP宠物自动喂食器 一、功能说明&#xff1a; 基于STM32单片机设计---蓝牙APP宠物自动喂食器 二、功能说明&#xff1a; STM32F103C系列最小系统板LCD1602显示器DS1302时钟模块5个按键语音播报模块ULN2003步进电机模块LED灯板HC-05蓝牙模块&#x…
阅读更多...
检查网站是HTTP那种协议与获取域名的ipv6地址

检查网站是HTTP那种协议与获取域名的ipv6地址

前言 最近在做HTTPS的应用&#xff0c;可能需要使用ipv6的地址做SLB&#xff0c;但是怎么检查配置正确&#xff0c;总不能每次都看日志吧&#xff0c;实际上客户端也很容易查看&#xff0c;总结工作经验。 检查HTTP协议版本 笔者想到了使用浏览器方式&#xff0c;或者抓包&a…
阅读更多...
春秋云镜 CVE-2020-26042

春秋云镜 CVE-2020-26042

春秋云镜 CVE-2020-26042 Hoosk CMS v1.8.0 存在sql注入漏洞 靶标介绍 Hoosk CMS v1.8.0 install/index.php 存在sql注入漏洞。 启动场景 漏洞利用 SQL注入POC POST /install/index.php HTTP/1.1 Host: xxxx User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; r…
阅读更多...
如何使用 ChatGPT 规划家居装修

如何使用 ChatGPT 规划家居装修

你正在计划家庭装修项目&#xff0c;但不确定从哪里开始&#xff1f;ChatGPT 随时为你提供帮助。从集思广益的设计理念到估算成本&#xff0c;ChatGPT 可以简化你的家居装修规划流程。在本文中&#xff0c;我们将讨论如何使用 ChatGPT 有效地规划家居装修&#xff0c;以便你的项…
阅读更多...
Ajax入门

Ajax入门

文章目录 axios体验axios-查询参数常用请求方法数据提交 axios错误处理 axios体验 引入axios库 使用axios语法 axios({url: 目标资源地址 }).then((result)>{// 对服务器返回的数据做后续处理 })完整实例 <!DOCTYPE html> <html lang"en"><head&g…
阅读更多...
Golang空结构体struct{}的作用是什么？

Golang空结构体struct{}的作用是什么？

文章目录 占位符&#xff1a;通道标识&#xff1a;键集合&#xff1a;内存占用优化&#xff1a;总结&#xff1a; 在Go语言中&#xff0c;空结构体 struct{}是一种特殊的数据类型&#xff0c;它不占用任何内存空间。空结构体没有任何字段&#xff0c;也没有任何方法。尽管它看起…
阅读更多...
Linux文本处理工具和正则表达式

Linux文本处理工具和正则表达式

Linux文本处理工具和正则表达式 一.查看、截取和修改文本的工具 1.查看文本的工具 cat 最常用的文件查看命令&#xff1b;当不指明文件或者文件名为一杠’-时&#xff0c;读取标准输入。 cat [OPTION]... [FILE]... -A&#xff1a;显示所有控制符(tab键:^I;行结束符:$) -…
阅读更多...
Python web实战之Django的文件上传和处理详解

Python web实战之Django的文件上传和处理详解

概要 关键词&#xff1a;Python Web开发、Django、文件上传、文件处理 今天分享一下Django的文件上传和处理。 1. 上传文件的基本原理 在开始深入讲解Django的文件上传和处理之前&#xff0c;先了解一下文件上传的基本原理。当用户选择要上传的文件后&#xff0c;该文件会被发…
阅读更多...
拨开迷雾：利用全链路消息跟踪揭示系统奥秘

拨开迷雾：利用全链路消息跟踪揭示系统奥秘

在分布式系统&#xff0c;一次外部请求往往需要内部多个模块&#xff0c;多个中间件&#xff0c;多台机器的相互调用才能完成。在这一系列的调用中&#xff0c;可能有些是串行的&#xff0c;而有些是并行的&#xff0c;排查定位非常困难。 全链路消息分析及全链路消息跟踪可以帮…
阅读更多...
网络编程——深入理解TCP/IP协议——OSI模型和TCP/IP模型：构建网络通信的基石

网络编程——深入理解TCP/IP协议——OSI模型和TCP/IP模型：构建网络通信的基石

TCP/IP协议— 一、简介 TCP/IP协议&#xff0c;即传输控制协议/互联网协议&#xff0c;是一组用于在计算机网络中实现通信的协议。它由两个主要的协议组成&#xff1a;TCP&#xff08;传输控制协议&#xff09;和IP&#xff08;互联网协议&#xff09;。TCP负责确保数据的可靠…
阅读更多...
JWT的使用

JWT的使用

文章目录 前言一、在yml文件中配置参数二、创建JwtUtil.java三、创建JwtProperties.java四、创建JwtClaimsConstant.java五、创建JwtTokenAdminInterceptor.java六、注册到WebMvcConfiguration1.4.3 ThreadLocal 前言 一、在yml文件中配置参数 sky:jwt:# 设置jwt签名加密时使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023