OpenCV.js初步使用及小例子

最新推荐文章于 2024-06-19 12:07:54 发布

aabond

最新推荐文章于 2024-06-19 12:07:54 发布

阅读量2w

点赞数 14

分类专栏： javascript opencv 文章标签： OpenCV js

本文链接：https://blog.csdn.net/qq_23091073/article/details/81461016

版权

web 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

opencv

5 篇文章 1 订阅

订阅专栏

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.全部代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello OpenCV.js</title>
	<style type="text/css">
		.inputoutput{
			float: left;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h2>Hello OpenCV.js</h2>
	<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">canvasOutput</div>
		</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>

aabond

关注

14
点赞
踩
71

收藏

觉得还不错? 一键收藏
打赏
19
评论
OpenCV.js初步使用及小例子

OpenCV.js初步使用及小例子1.OpenCV.js官方教程https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html，翻译下目录OpenCV.js介绍了解如何在网页中使用OpenCV.js！GUI功能在这里，你将学习如何读取和显示图像和视频，并创建轨迹条。核心操作在本节中，你将学习图像、数学工具和一...
复制链接

扫一扫