<!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. pytorch中tensor张量数据基础入门

    pytorch张量数据类型入门1.对于pytorch的深度学习框架,其基本的数据类型属于张量数据类型,即Tensor数据类型,对于python里面的int,float,int array,flaot ...

  2. JSP数据交互二

    1.JSP内置对象:JSP内置对象是 Web 容器创建的一组对象,不用通过手动new就可以使用2.JSP9大内置对象:      对象名称 类型 request (请求对象)  javax.servl ...

  3. 实验一 git代码版本管理

    实验目的 1. 了解分布式系统版本管理的核心机理. 2. 熟练掌握 git 的基本指令和分支管理指令. 实验内容 1. 安装 git.2. 初始化配置 git,git init ,git status ...

  4. 解决css中display:inline-block的兼容问题

    *display:inline; *zoom:1; 不多说,ie6/7直接在元素添加以上的属性即可.

  5. Keepalived——HA

    一.HA集群中的相关术语 1.节点(node) 运行HA进程的一个独立主机,称为节点,节点是HA的核心组成部分,每个节点上运行着操作系统和高可用软件服务,在高可用集群中,节点有主次之分,分别称之为主节 ...

  6. django 配置404，500页面

    JSP CURL session COOKIE diango 自定义404 500页面     1.首先将settings设置debug=false;             2.设置static路径 ...

  7. IDEA 单行注释与代码对齐

    效果 修改步骤 Settings -> Editor -> Code Style (1)修改.java文件的注释 comment   评论.注释.意见. (2)修改.html文件的注释 ( ...

  8. 有时间会做系列一（Dice）

    题目大意:给n个骰子的每面安排点数,第i个骰子有a[i]面,a[i]和为m,点数范围从1到m,不重复.问怎么安排掷骰子的点数和的期望最大.输出期望和每个骰子的点数(按骰子输入顺序). 思路: EX=x ...

  9. hadoop 第一个 mapreduce 程序（对MapReduce的几种固定代码的理解）

    1.2MapReduce 和 HDFS 是如何工作的 MapReduce 其实是两部分,先是 Map 过程,然后是 Reduce 过程.从词频计算来说,假设某个文件块里的一行文字是”Thisis a ...

  10. 2018--Linux面试题

    1.企业场景面试题:buffer与Cache的区别. 2.企业场景面试题:redhat与CentOS的区别. 3.企业场景面试题:  描述RAID 0 1 5 10的特点. 4.企业场景面试题:32位 ...