前端使用opencv

最近了解了下opencv,看了下官方的實例和文檔
opencvjs文檔入口 3.3.1版本
看了官方示例的網頁結構
基本上全部的實例都用到了兩個js
核心js：opencv.js
工具js：utils.js
官方給出的方案是

javascript

Installing Emscripten
Emscripten is an LLVM-to-JavaScript compiler. We will use Emscripten to build OpenCV.js.
安裝Emscripten
Emscripten是LLVM到JavaScript的編譯器。咱們將使用Emscripten構建OpenCV.js。

css

可是它官方示例中確定要用到js對吧
我看了不少csdn文件分享都須要c幣或者積分
並且本身編譯的也容易出問題
官方給出的能運行示例那麼爲啥不拿來用呢
同時還有官方訓練的人臉識別xml文件同樣能夠爬取
那就去網頁爬取
老方法右鍵檢查元素

html

下載這三個文件放到項目目錄下前端

分析網頁結構

將關鍵代碼複製下來後放到本身的文件內

vue

代碼來自爬取官方java

<!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>

效果python

提示
這個頁面的好處有不少，能夠將本身的js寫入來測試本身的功能，稍微修改代碼便可跑通官方給出的全部示例。

mysql

你們好，我是代碼哈士奇，是一名軟件學院網絡工程的學生，由於我是「狗」，狗走千里吃肉。想把大學期間學的東西和你們分享，和你們一塊兒進步。但因爲水平有限，博客中不免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！暫時只在csdn這一個平臺進行更新，博客主頁：https://blog.csdn.net/qq_42027681。spring

未經本人容許，禁止轉載sql

後續會推出

前端：vue入門 vue開發小程序等
後端： java入門 springboot入門等
服務器：mysql入門服務器簡單指令雲服務器運行項目
python：推薦不溫卜火必定要看哦
一些插件的使用等

大學之道亦在自身，努力學習，熱血青春
若是對編程感興趣能夠加入咱們的qq羣一塊兒交流：974178910

有問題能夠下方留言，看到了會回覆哦

opencv.js人臉識別簡單使用

前端使用opencv