前端使用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文件一样可以爬取
那就去网页爬取
老方法 右键检查元素
下载这三个文件放到项目目录下
分析网页结构
将关键代码复制下来后放到自己的文件内
代码来自爬取官方
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>Face Detection Camera Example</title> 7<link href="https://docs.opencv.org/3.3.1/js_example_style.css" rel="stylesheet" type="text/css" /> 8</head> 9<body> 10<!-- <h2>Face Detection Camera Example</h2> --> 11<div> 12<div class="control"><button id="startAndStop">Start</button></div> 13<textarea class="code" rows="29" cols="80" id="codeEditor" spellcheck="false"> 14 15</textarea> 16</div> 17<p class="err" id="errorMessage"></p> 18<div> 19 <table cellpadding="0" cellspacing="0" width="0" border="0"> 20 <tr> 21 <td> 22 <video id="videoInput" width=320 height=240></video> 23 </td> 24 <td> 25 <canvas id="canvasOutput" width=320 height=240></canvas> 26 </td> 27 <td></td> 28 <td></td> 29 </tr> 30 <tr> 31 <td> 32 <div class="caption">videoInput</div> 33 </td> 34 <td> 35 <div class="caption">canvasOutput</div> 36 </td> 37 <td></td> 38 <td></td> 39 </tr> 40 </table> 41</div> 42<script type="text/javascript" src="js/opencv.js"></script> 43<!-- <script src="js/adapter-5.0.4.js" type="text/javascript"></script> --> 44<script src="js/utils.js" type="text/javascript"></script> 45<script id="codeSnippet" type="text/code-snippet"> 46let video = document.getElementById('videoInput'); 47let src = new cv.Mat(video.height, video.width, cv.CV_8UC4); 48let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4); 49let gray = new cv.Mat(); 50let cap = new cv.VideoCapture(video); 51let faces = new cv.RectVector(); 52let classifier = new cv.CascadeClassifier(); 53 54// load pre-trained classifiers 55classifier.load('haarcascade_frontalface_default.xml'); 56 57const FPS = 30; 58function processVideo() { 59 try { 60 if (!streaming) { 61 // clean and stop. 62 src.delete(); 63 dst.delete(); 64 gray.delete(); 65 faces.delete(); 66 classifier.delete(); 67 return; 68 } 69 let begin = Date.now(); 70 // start processing. 71 cap.read(src); 72 src.copyTo(dst); 73 cv.cvtColor(dst, gray, cv.COLOR_RGBA2GRAY, 0); 74 // detect faces. 75 classifier.detectMultiScale(gray, faces, 1.1, 3, 0); 76 // draw faces. 77 for (let i = 0; i < faces.size(); ++i) { 78 let face = faces.get(i); 79 let point1 = new cv.Point(face.x, face.y); 80 let point2 = new cv.Point(face.x + face.width, face.y + face.height); 81 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); 82 } 83 cv.imshow('canvasOutput', dst); 84 // schedule the next one. 85 let delay = 1000/FPS - (Date.now() - begin); 86 setTimeout(processVideo, delay); 87 } catch (err) { 88 utils.printError(err); 89 } 90}; 91 92// schedule the first one. 93setTimeout(processVideo, 0); 94</script> 95<script type="text/javascript"> 96 97 let utils = new Utils('errorMessage'); 98 99 utils.loadCode('codeSnippet', 'codeEditor'); 100 101 let streaming = false; 102 let videoInput = document.getElementById('videoInput'); 103 let startAndStop = document.getElementById('startAndStop'); 104 let canvasOutput = document.getElementById('canvasOutput'); 105 let canvasContext = canvasOutput.getContext('2d'); 106 107 startAndStop.addEventListener('click', () => { 108 if (!streaming) { 109 utils.clearError(); 110 utils.startCamera('qvga', onVideoStarted, 'videoInput'); 111 } else { 112 utils.stopCamera(); 113 onVideoStopped(); 114 } 115 }); 116 117 function onVideoStarted() { 118 streaming = true; 119 startAndStop.innerText = 'Stop'; 120 videoInput.width = videoInput.videoWidth; 121 videoInput.height = videoInput.videoHeight; 122 utils.executeCode('codeEditor'); 123 } 124 125 function onVideoStopped() { 126 streaming = false; 127 canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height); 128 startAndStop.innerText = 'Start'; 129 } 130 131 utils.loadOpenCv(() => { 132 let faceCascadeFile = 'haarcascade_frontalface_default.xml'; 133 utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => { 134 // startAndStop.removeAttribute('disabled'); 135 }); 136 }); 137 138 139</script> 140</body> 141</html> 142
效果
提示
这个页面的好处有很多，可以将自己的js写入来测试自己的功能，稍微修改代码即可跑通官方给出的所有示例。
<br><br><br><br>
大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！
未经本人允许，禁止转载
后续会推出
前端：vue入门 vue开发小程序 等 后端： java入门 springboot入门等 服务器：mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等
大学之道亦在自身，努力学习，热血青春 如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会回复哦