opencv.js人脸识别简单使用

代码哈士奇 等级 679 0 0

前端使用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文件一样可以爬取 那就去网页爬取 老方法 右键检查元素 opencv.js人脸识别简单使用 opencv.js人脸识别简单使用

下载这三个文件放到项目目录下

分析网页结构 opencv.js人脸识别简单使用 将关键代码复制下来后放到自己的文件内

代码来自爬取官方


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

效果

opencv.js人脸识别简单使用 opencv.js人脸识别简单使用提示 这个页面的好处有很多,可以将自己的js写入来测试自己的功能,稍微修改代码即可跑通官方给出的所有示例。





  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

opencv.js人脸识别简单使用


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

有问题可以下方留言,看到了会回复哦

收藏
评论区

相关推荐

opencv.js人脸识别简单使用
前端使用opencv 最近了解了下opencv,看了下官方的实例和文档 opencvjs文档入口 3.3.1版本(https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html) 看了官方示例的网页结构 基本上所有的实例都用到了两个js 核心js:opencv.js 工具js:utils.js 官方
5 行 Python 代码调用电脑摄像头
**前提:** 确保 python 中安装了 opencv-python 模块。如果没有安装,可以参考:[https://pypi.org/project/opencv-python/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fpypi.org%2Fproject%2Fopencv
VScode搭建OpenCV环境
  用vscode来写opencv代码需要自己编译OpenCV,主要用到MinGW-w64和CMake工具。由于可能存在的版本兼容问题,下载这些工具前最好先访问网站:     **[https://github.com/huihut/OpenCV-MinGW-Build](https://www.oschina.net/action/GoToLink?ur
vs2013+opencv3.2配置
  opencv库在3.0以后分为opencv库和opencv\_contrib库两部分,其中opencv\_contrib库是一个扩展库,如果需要使用SIFT和SURF算法就需要安装这个扩展库,否则只用安装opencv库即可。   对于vs2015、vs2017这样的高版本vs有现成的编译好的opencv库,直接安装即可,但是opencv\_contri
Ubuntu 16.04 LTS下安装SDK和识别demo
> 相关资源百度网盘下载 > > [OpenCV-3.3.1-amd64-libs.deb](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fpan.baidu.com%2Fs%2F1HMxG5898ycgUA7JDQlVTmg) > > [OpenCV-3.3.1-amd64-dev.
ubuntu16.04搭建opencv2.4.13开发环境
1.先去官网下载对应版本的opencv压缩文件,打开终端解压文件. unzip opencv-2.4.13.zip   mv opencv-2.4.13 opencv  2.安装一些必须的依赖库 sudo apt install cmake  sudo apt install build-essential cmake libgtk2.0-dev 
Android OpenCV环境搭建(Cmake)
OpenCV(Open Source Computer Vision Library) =========================================== * * * 下载OpenCV4Android SDK -------------------- 在Android平台以来OpenCV进行开发,需要下载OpenCV For And
CentOS 7.6上安装SDK和识别DEMO
> 准备,先从百度网盘下载所需要的rpm包 > > [OpenCV-3.3.1-x86\_64-libs.rpm](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fpan.baidu.com%2Fs%2F1Vq3CfPW99QWSzS4aPA8bHQ) > > [OpenCV-3.3.1
Cmake opencv_videoio_ffmpeg.dll下载失败
用Cmake对OpenCV进行Configure,下载opencv\_videoio\_ffmpeg.dll和opencv\_videoio\_ffmpeg\_64.dll经常失败,解决方案是:到CMake中设置的Where to build the binaries的路径下去找名为CMakeDownloadLog.txt的文件,里面会有ffmpeg.dll
Install OpenCV on Ubuntu or Debian
[Install OpenCV on Ubuntu or Debian](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmilq.github.io%2Finstall-opencv-ubuntu-debian) Install OpenCV on Ubuntu or Debian is
Linux(Ubuntu 18.04)中安装OpenCV + OpenCV_Contrib
从github中down下OPenCV + OpenCV\_Contrib库,可以从[https://github.com/opencv](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fopencv)上下载(注意版本对应) cd ~/<my_workin
NDK使用OpenCV2.4.2本地代码
本文讲述Android NDK中使用OpenCV2.4.2的详细过程(不使用OpenCV的java封装) 1\. 前期准备: a. 下载 [opencv-android-sdk](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fop
OpenCV 新版 4.5.1 发布!
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达转自|新机器视觉 **发布亮点:Z** OpenCV Github 项目终于突破50000 stars!新的里程碑~ 这次发布的特性包括: 集成更多的**GSoC 2020 项目**的结果,包括: 1\. 开发了OpenCV.js DNN 模块,以方便再网页中使用,并提供
OpenCV在各版本上的安装教程
\[TOC\] 翻译自:[OpenCV Tutorials, Resources, and Guides | PyImageSearch](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.pyimagesearch.com%2Fopencv-tutorials-resources-
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解 ============================== 2016年09月02日 00:00:36 [\-牧野-](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593