OpenCV.js初步使用及小例子
1.OpenCV.js官方教程
https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html，翻译下目录
-
OpenCV.js介绍
了解如何在网页中使用OpenCV.js！ -
GUI功能
在这里，你将学习如何读取和显示图像和视频，并创建轨迹条。 -
核心操作
在本节中，你将学习图像、数学工具和一些数据结构等基本操作。 -
图像处理
在本节中，你将了解OpenCV内置的不同图像处理函数。 -
视频分析
在本节中，你将学习不同的技术来处理视频，如对象跟踪等。 -
对象检测
在本节中，你将学习对象检测，像人脸检测的技术
2.OpenCV.js文件获取
https://download.csdn.net/download/qq_23091073/10305912
3.OpenCV.js使用例子
3.1 参考
在参考博客中使用C/C++实现磨皮美颜，这个例子将用OpenCV.js实现。
3.2 主要公式
dst = (image * (100 - Opacity) + (image + 2 * GaussianBlur (bilateralFilter (image) - image + 128) - 256) * Opacity) /100 ;
3.3 主要函数
- 实现矩阵加减cv.add(), cv.subtract()
- 实现矩阵乘 cv.addWeighted()
- 双边滤波cv.bilateralFilter()
- 高斯模糊cv.GaussianBlur()
3.4 代码实现
function face2(image, value1, value2)
{
let dst = new cv.Mat();
if(value1 == null || value1 == undefined) value1 = 3;//磨皮系数
if(value2 == null || value2 == undefined) value2 = 1;//细节系数 0.5 - 2
var dx = value1 * 5;//双边滤波参数
var fc = value1 * 12.5;//参数
var p = 0.1;//透明度
let temp1 = new cv.Mat(), temp2 = new cv.Mat(),
temp3 = new cv.Mat(), temp4 = new cv.Mat();
cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0);
cv.bilateralFilter(image, temp1, dx, fc, fc);//bilateralFilter(Src)
let temp22 = new cv.Mat();
cv.subtract(temp1, image, temp22);//bilateralFilter(Src) - Src
cv.add(temp22, new cv.Mat(
image.rows,
image.cols,
new cv.Scalar(128, 128, 128, 128)),
temp2);
//bilateralFilter(Src) - Src + 128
cv.GaussianBlur(temp2, temp3, new cv.Size(2 * value2 - 1, 2 * value2 - 1), 0, 0);
//2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 1
let temp44 = new cv.Mat();
temp3.convertTo(temp44, temp3.type(), 2, -255);
//2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256
cv.add(image, temp44, temp4);
cv.addWeighted(image, p, temp4, 1-p, 0.0, dst);
//Src * (100 - Opacity)
cv.add(dst, new cv.Mat(image.rows,
image.cols,
image.type(),
new cv.Scalar(10, 10, 10, 0)),
dst);
//(Src * (100 - Opacity) + (Src + 2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256) * Opacity) /100
return dst;
}
执行效果如下：
4.全部代码
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.jstitle>
<style type="text/css">
.inputoutput{
float: left;
margin: 10px;
}
style>
head>
<body>
<h2>Hello OpenCV.jsh2>
<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">canvasOutputdiv>
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);
mat = face2(mat, 4, 3);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
function face2(image, value1, value2)
{
let dst = new cv.Mat();
if(value1 == null || value1 == undefined) value1 = 3;//磨皮系数
if(value2 == null || value2 == undefined) value2 = 1;//细节系数 0.5 - 2
var dx = value1 * 5;//双边滤波参数
var fc = value1 * 12.5;//参数
var p = 0.1;//透明度
let temp1 = new cv.Mat(), temp2 = new cv.Mat(), temp3 = new cv.Mat(), temp4 = new cv.Mat();
cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0);
cv.bilateralFilter(image, temp1, dx, fc, fc);//bilateralFilter(Src)
let temp22 = new cv.Mat();
cv.subtract(temp1, image, temp22);//bilateralFilter(Src) - Src
cv.add(temp22, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(128, 128, 128, 128)), temp2);//bilateralFilter(Src) - Src + 128
cv.GaussianBlur(temp2, temp3, new cv.Size(2 * value2 - 1, 2 * value2 - 1), 0, 0);
//2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 1
let temp44 = new cv.Mat();
temp3.convertTo(temp44, temp3.type(), 2, -255);
//2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256
cv.add(image, temp44, temp4);
cv.addWeighted(image, p, temp4, 1-p, 0.0, dst);
//Src * (100 - Opacity)
cv.add(dst, new cv.Mat(image.rows, image.cols, image.type(), new cv.Scalar(10, 10, 10, 0)), dst);
//(Src * (100 - Opacity) + (Src + 2 * GuassBlur(bilateralFilter(Src) - Src + 128) - 256) * Opacity) /100
return dst;
}
script>
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript">script>
body>
html>