<!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. jenkins 2.204.2 安装, 使用国内源安装, 并且跳过插件界面, 更新成国内插件源.

    需要java环境支持,自行百度. jenkins 安装源在国外, 下载会比较慢, 尤其在linux下, 使用yum或者apt install jenkins方式安装时,经常会下载失败. 由于yum或者 ...

  2. C# 自定义控件容器，设计时可添加控件

    本分步指南介绍在将 UserControl 放在 Windows 窗体上之后,如何将 UserControl 对象用作设计时控件容器.可能会有这样的情况:您想将一个控件拖到 UserControl 中 ...

  3. sklearn的train_test_split()各函数参数含义解释（非常全）

    sklearn之train_test_split()函数各参数含义(非常全) 在机器学习中,我们通常将原始数据按照比例分割为“测试集”和“训练集”,从 sklearn.model_selection ...

  4. kali打开networkmanager

    有时候可能在用网卡时,或者是其他情况下关闭了networkmanager,而要管理网络这个又是必须的,需要我们手动打开. 没有网络管理器是这样的: 有管理器是这样的: 不多废话了,用命令/etc/in ...

  5. 十九 Listener

    Listener 监听器 一 监听器内部原理:其实就是接口回调 需求:A在执行循环,当循环到5的时候,通知B 事先先把某一个对象传递给A ,当A执行到5的时候,通过这个对象来调用B中的方法 但是不是直 ...

  6. VM ubuntu18.04.01虚拟机没办法联网

    sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service ...

  7. java.io.FileNotFoundException: rmi_keystore.jks (No such file or directory)（转）

    Caused by: java.io.FileNotFoundException: rmi_keystore.jks (没有那个文件或目录) 解决方法:修改jmeter.properites: ser ...

  8. python2学习------基础语法5（常用容器以及相关操作）

    1.list(列表) #生成数据list a=[x for x in range(10)]; #print a; #遍历list for i in a: pass; #print i; #追加元素 a ...

  9. 新闻网大数据实时分析可视化系统项目——18、Spark SQL快速离线数据分析

    1.Spark SQL概述 1)Spark SQL是Spark核心功能的一部分,是在2014年4月份Spark1.0版本时发布的. 2)Spark SQL可以直接运行SQL或者HiveQL语句 3)B ...

  10. Day7 - A - Visible Lattice Points POJ - 3090

    A lattice point (x, y) in the first quadrant (x and y are integers greater than or equal to 0), othe ...