<!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. java基础多线程

    线程的创建 方式1:继承Java.lang.Thread类,并覆盖run() 方法 package com.demo.Thread; public class ThreadDemo01 extends ...

  2. Python学习第九课——匿名函数

    匿名函数 # 匿名函数 func = lambda x: x + 1 # x表示参数 x+1表示处理逻辑 print(func(10)) # 输出结果为11 # 例:如何将name="han ...

  3. 新闻网大数据实时分析可视化系统项目——3、Hadoop2.X分布式集群部署

    (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 1.基于Apache厂商的最原始的hadoop版本, 所有发行版均基于这个版本进行改进. 2.基于 ...

  4. CH8 IO库

    8.1 #include <iostream> #include <string> #include <sstream> #include <fstream& ...

  5. PhpStorm 10.0.1破解激活步骤

    1.下载破解补丁 链接:https://pan.baidu.com/s/1S4JVKiaFnCZG01MpDPaAAA 密码:c6x6 放到phpstorm安装目录下的lib文件夹下: C:\soft ...

  6. Python 2 与 3 共存了 11 年，新年就要和它道别

    在 Python 3.9 都已经进入 dev 版本的 2020 年,Python 2 终于要和我们告别了. 2 and 3 Python 2 第一个版本发布于 2000 年 10 月 16 日,到今年 ...

  7. Postgresql数据库数据简单的导入导出

    Postgresql数据库数据简单的导入导出 博客分类: DataBase postgres  命令操作: 数据的导出:pg_dump -U postgres(用户名)  (-t 表名)  数据库名( ...

  8. 简单模拟IOC容器：返回对象并能抛出异常

    本次要求:已知com.zzj.vo包下分别有Tiger.lion.Elephant三个Java源文件,请据此实现以下功能:①.自定义一个名为Component的注解,要求该注解只能用于类且代码运行时该 ...

  9. 侧边栏下拉时箭头的旋转动画(treeView控件)

    //点击菜单时箭头旋转 let treeView = document.getElementsByClassName("treeview");//let解决闭包问题 let las ...

  10. POJ 3371：Flesch Reading Ease 模拟

    Flesch Reading Ease Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2071   Accepted: 60 ...