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…
阅读更多...
C++解决TCP粘包

C++解决TCP粘包

目录 TCP粘包问题TCP客户端TCP服务端源码测试 TCP粘包问题 TCP是面向连接的&#xff0c;面向流的可靠性传输。TCP会将多个间隔较小且数据量小的数据&#xff0c;合并成一个大的数据块&#xff0c;然后进行封包发送&#xff0c;这样一个数据包里就可能含有多个消息的数据&#…
阅读更多...
mysql 拼接字符串，截取字符串 常用方式

mysql 拼接字符串，截取字符串 常用方式

1&#xff0c;拼接字符串常用&#xff1a;CONCAT(‘需要拼接的字符串’,列名) select a.UserState,a.OrgUserId,a.UserName, CONCAT(,b.Telephone),b.AreaCode from T_UserInfo b inner join T_User a on a .UserIdb.UserId and a.UserName!admin and a.UserState!Resigned…
阅读更多...
02-状态模式

02-状态模式

1 意图 允许一个对象在其内部状态改变时改变它的行为&#xff0c;对象看起来似乎修改了它的类。&#xff08;这里的对象指的就是模型中的Context&#xff0c;行为指的就是State的子类&#xff09; 2 动机 考虑一个问题&#xff1a;实现一个表示网络连接的类TCPConnection&am…
阅读更多...
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;而测…
阅读更多...
.gitkeep介绍

.gitkeep介绍

最近在nand flash上创建可读写分区的时候涉及到了.gitkeep&#xff0c;了解了一下。 .gitkeep 文件的作用 .gitkeep 这个文件并不是一个多么复杂 &#xff0c;相反&#xff0c;它的意图&#xff0c;或者说作用&#xff0c;其实非常简单&#xff01;就是—使 Git 保留一个空文…
阅读更多...
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…
阅读更多...
JS实现节流与防抖

JS实现节流与防抖

前言&#xff1a;节流和防抖就是为了减少性能开销和提升用户体验而生的&#xff0c;主要优化【接口暴击】【表单重复提交】【搜索框搜索输入】等相关问题&#xff1b; 节流 定义&#xff1a;当持续触发事件时&#xff0c;一定时间段内没有再触发事件&#xff0c;事件处理函数才…
阅读更多...
如何使用伪元素::before和::after?

如何使用伪元素::before和::after?

伪元素(::before和::after)是CSS中非常有用的特性&#xff0c;它们允许你在元素的内容之前或之后插入额外的内容&#xff0c;并且不需要在HTML结构中添加额外的标记。这样可以方便地在页面上添加装饰性元素、图标、或者样式效果。以下是使用伪元素的基本方法&#xff1a; 1、创…
阅读更多...
春秋云镜 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…
阅读更多...
android Native C++打印堆栈

android Native C++打印堆栈

记录一下Android堆栈打印方法&#xff0c;程序运行堆栈在分析代码运行逻辑中非常有用 1.在要打印堆栈的模块中添加libutilscallstack、libutils两个共享库依赖&#xff0c;有可能是Android.mk&#xff0c;也有可能是Android.bp Android.bp&#xff1a; cc_defaults {name: &qu…
阅读更多...
最新文章

Copyright @ 2022~2023