OpenCV.js初步使用及小例子

5 篇文章 0 订阅
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>
  • 14
    点赞
  • 71
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aabond

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值