<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>OpenCV.js</title>

    <style type="text/css">

        .inputoutput {

            float: left;

            margin: 10px;

        }

    </style>

</head>

<body>

    <h3 id="status">OpenCV.js is loading...</h3>

    <select id="select">

        <option value="bilateralFilter">双边滤波(bilateralFilter)</option>

    </select>

    <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');

        let select = document.getElementById('select');

        inputElement.addEventListener('change', (e) => {

            imgElement.src = URL.createObjectURL(e.target.files[0]);

        }, false);

        select.addEventListener('change', (e) => {

            // imgElement.src = URL.createObjectURL(e.target.files[0]);

            console.log(select.value)

        }, false);

        imgElement.onload = function() {

            let mat = cv.imread(imgElement);

            mat = bilateralFilter(mat, 4, 3);

            cv.imshow('canvasOutput', mat);

            mat.delete();

        };

        function onOpenCvReady() {

            document.getElementById('status').innerHTML = 'OpenCV.js is ready.';

        }

        function bilateralFilter(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>

　　代码地址：https://github.com/dnoyeb/opencv-js

opencv.js双边滤波 磨皮处理的更多相关文章

  1. opencv-12-高斯滤波-双边滤波(附C++代码实现)

    开始之前 这几天由于自己的原因没有写, 一个是因为自己懒了, 一个是感觉这里遇到点问题不想往下写了, 我们先努力结束这个章节吧, 之前介绍了比较常用而且比较好理解的均值和中值滤波, 但是呢,在例程Sm ...

  2. [学习opencv]高斯、中值、均值、双边滤波

    http://www.cnblogs.com/tiandsp/archive/2013/04/20/3031862.html [学习opencv]高斯.中值.均值.双边滤波 四种经典滤波算法,在ope ...

  3. 【OpenCV】邻域滤波：方框、高斯、中值、双边滤波

    原文:http://blog.csdn.net/xiaowei_cqu/article/details/7785365 邻域滤波(卷积)   邻域算子值利用给定像素周围像素的值决定此像素的最终输出.如 ...

  4. OpenCV计算机视觉学习（4）——图像平滑处理（均值滤波，高斯滤波，中值滤波，双边滤波）

    如果需要处理的原图及代码,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice &q ...

  5. OpenCv高斯，中值，均值，双边滤波

    #include "cv.h" #include "highgui.h" #include <iostream> using namespace s ...

  6. opencv —— boxFilter、blur、GaussianBlur、medianBlur、bilateralFilter 线性滤波（方框滤波、均值滤波、高斯滤波）与非线性滤波（中值滤波、双边滤波）

    图像滤波,指在尽量保留图像细节特征的条件下对目标图像的噪声进行抑制,是图像与处理中不可缺少的操作. 邻域算子,指利用给定像素及其周围的像素值,决定此像素的最终输出值的一种算子.线性邻域滤波器就是一种常 ...

  7. opencv.js小案例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Atitit   图像处理 平滑 也称 模糊, 归一化块滤波、高斯滤波、中值滤波、双边滤波）

    Atitit   图像处理 平滑 也称 模糊, 归一化块滤波.高斯滤波.中值滤波.双边滤波) 是一项简单且使用频率很高的图像处理方法 用途 去噪 去雾 各种线性滤波器对图像进行平滑处理,相关OpenC ...

  9. OpenCL双边滤波实现美颜功能

    OpenCL是一个并行异构计算的框架,包括intel,AMD,英伟达等等许多厂家都有对它的支持,不过英伟达只到1.2版本,主要发展自己的CUDA去了.虽然没有用过CUDA,但个人感觉CUDA比Open ...

随机推荐

  1. MySQL操作之DCL

    目录 SQL语句的分类 DCL语句 SQL语句的分类 DDL(Data Definition Languages)语句:数据定义语言.这些语句定义了不同的数据段. 数据库.表.列.索引等数据库对象的定 ...

  2. .net设置浏览器缓存和跨域的几种方法

    .自定义过滤器属性 public class NoCacheAttribute : FilterAttribute, IActionFilter { public void OnActionExecu ...

  3. mabatis--查询缓存

    1.mybatis提供查询缓存,用于减轻数据库压力,提高数据库性能. 2.mybatis提供一级缓存.二级缓存: 3.一级缓存是SqlSession级别的缓存.在SqlSession对象中,存在一个数 ...

  4. JDBC--DBUtils的使用

    1.commons-dbutils是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序的性 ...

  5. 关于MySQL连接Navicat Premium 12失败的解决方法

    出现问题的原因:MySQL8.0之后更换了加密方式,而这种加密方式客户端不支持 解决:更改加密方式 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysq ...

  6. Codeforces 1296E2. String Coloring (hard version)

    这道题和HDU1257一模一样,一开始窝都用贪心直接解,没法理解为什么求一个最长下降序列,直到看了巨巨的题解,先给出一个定理,Dilworth's theorem,离散学不好,补题两行泪,该定理是说, ...

  7. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记：宠物商店实例分析

    interface Pet{ // 定义宠物接口 public String getName() ; public String getColor() ; public int getAge() ; ...

  8. '/'和‘/*’差异造成的No mapping found for HTTP request with URI [/springMVC/welcome.jsp] in DispatcherServlet with name 'springmvc'

    在采用springMVC框架的时候所遇到的一个小问题,其中web.xml中关于servlet的配置如下: <servlet> <servlet-name>springmvc&l ...

  9. idea2018破解到2099年

    破解的详细过程: 1.从下面地址下载一个jar包,名称是 JetbrainsCrack-3.1-release-enc.jar 下载地址链接: https://pan.baidu.com/s/1WU5 ...

  10. 原型与继承与class

    对象有属性(专业点叫静态属性)和方法(专业点叫静态方法)和原型属性和原型方法 除了系统自带的那么几百万个对象,我们自己写在js的创建的对象,自定义的对象,都来自对象的构造函数,用来构造对象的函数,叫做 ...