<!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. 吴裕雄--天生自然HADOOP操作实验学习笔记：协同过滤算法

    实验目的 初步认识推荐系统 学会用mapreduce实现复杂的算法 学会系统过滤算法的基本步骤 实验原理 前面我们说过了qq的好友推荐,其实推荐算法是所有机器学习算法中最重要.最基础.最复杂的算法,一 ...

  2. ELK/EFK——日志收集分析平台

    ELK——日志收集分析平台 ELK简介:在开源的日志管理方案之中,最出名的莫过于ELK了,ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成.1)ElasticSea ...

  3. 一个前端博主的nginx+php+mysql的环境搭建

    这几天天某的公司给了在下一个需求,让我修改一个后端大佬用PHP写的一个官网,虽然说修改的内容还是很简单,但是毕竟之前还是没接触过PHP,于是开始了漫长的爬坑之旅,话不多说,这次就给大家介绍一下我配置安 ...

  4. Backbone.js 历史&文档

    历史: 0.1.0版本产生于  ‘— Oct 13, 2010 — Docs’ 文档: https://www.html.cn/doc/backbone/#changelog

  5. 厉害了！SpringBoot是如何动起来的！

    程序入口 SpringApplication.run(BeautyApplication.class, args); 执行此方法来加载整个SpringBoot的环境. 1. 从哪儿开始? Spring ...

  6. 前端学习笔记系列一：5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

  7. java 之word转html

    jar包  链接: https://pan.baidu.com/s/13o2CZTwM-Igx6wcoyEu_ug 密码: n95q package com.bistu.service; import ...

  8. k-近邻算法原理入门-机器学习

    //2019.08.01下午机器学习算法1——k近邻算法1.k近邻算法是学习机器学习算法最为经典和简单的算法,它是机器学习算法入门最好的算法之一,可以非常好并且快速地理解机器学习的算法的框架与应用.2 ...

  9. CRM：异步加载下拉列表，三个列表出现同样的下拉框

    异步加载下拉列表,三个列表出现同样的下拉框,原因如下: Spring默认单例,如果Action是单例,那么上一次查询的结果就可能被下一次的查询所调用.所以必须配置action为多例, 如果采用单例模式 ...

  10. 八 Hibernate延迟加载&抓取策略（优化）

    面试:Hibernate效率很低,如何优化? 缓存怎么弄的,语句怎么优化? 聊聊一级缓存,聊聊抓取策略和延迟加载,聊聊批量抓取 延迟加载: 一般不单独使用,和延迟加载一起使用 延迟加载:lazy(懒加 ...