前端使用opencv
最近了解了下opencv,看了下官方的實體和檔案
opencvjs檔案入口 3.3.1版本
看了官方示例的網頁結構
基本上所有的實體都用到了兩個js
核心js：opencv.js
工具js：utils.js
官方給出的方案是
Installing Emscripten
Emscripten is an LLVM-to-JavaScript compiler. We will use Emscripten to build OpenCV.js.
安裝Emscripten
Emscripten是LLVM到JavaScript的編譯器，我們將使用Emscripten構建OpenCV.js，
但是它官方示例中肯定要用到js對吧
我看了很多csdn檔案分享都需要c幣或者積分
而且自己編譯的也容易出問題
官方給出的能運行示例 那么為啥不拿來用呢
同時還有官方訓練的人臉識別xml檔案一樣可以爬取
那就去網頁爬取
老方法 右鍵檢查元素
下載這三個檔案放到專案目錄下
分析網頁結構
將關鍵代碼復制下來后放到自己的檔案內
代碼來自爬取官方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Face Detection Camera Example</title>
<link href="https://docs.opencv.org/3.3.1/js_example_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="js/opencv.js"></script>
<!-- <script src="js/adapter-5.0.4.js" type="text/javascript"></script> -->
<script src="js/utils.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>
效果
提示
這個頁面的好處有很多，可以將自己的js寫入來測驗自己的功能，稍微修改代碼即可跑通官方給出的所有示例，
??大家好，我是代碼哈士奇，是一名軟體學院網路工程的學生，因為我是“狗”，狗走千里吃肉，想把大學期間學的東西和大家分享，和大家一起進步，但由于水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！暫時只在csdn這一個平臺進行更新，博客主頁：https://blog.csdn.net/qq_42027681，
未經本人允許，禁止轉載
后續會推出
前端：vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225375.html
標籤：其他