<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Hello OpenCV.js</title>

    <style type="text/css">

        .inputoutput {

            float: left;

            margin: 10px;

        }

    </style>

</head>

<body>

    <h2>Hello OpenCV.js</h2>

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

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

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

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

        }, false);

        imgElement.onload = function () {

            let mat = cv.imread(imgElement);

            mat = face2(mat, 4, 3);

            cv.imshow('canvasOutput', mat);

            mat.delete();

        };

        function onOpenCvReady() {

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

        }

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

　　js下载地址 : https://pan.baidu.com/s/1ZMkhcPw31hmW9qOeeOr7fQ 密码:r5wh

速度很快，效果很好接下来啃英文文档去...

opencv.js小案例的更多相关文章

  1. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  2. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  5. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  6. node.js(小案例)_使用mongodb对学生信息列表优化

    一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...

  7. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  8. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  9. JS小案例(基础好烦恼少)----持续更新

    *************************************************** <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. 如何检测 51单片机IO口的下降沿

    下降沿检测,说白了就是满足这样一个逻辑,上次检测是1,这次检测是0,就是下降沿. 从这个条件可知,要确保能够正确检测到一个下降沿,负脉冲的宽度,必须大于一个检测周期,当负脉冲宽度小于一个检测周期,就有 ...

  2. 数据结构（c语言描述）

    预备的数学知识 数据结构的概念 基本名词 算法 线性表 线性表的定义和基本操作 顺序表 顺序表增 顺序表删 顺序表查 单链表 建立单链表 单链表增 单链表删 单链表查 双链表 循环链表 静态链表 栈 ...

  3. wordpress 学习笔记

    (1) __()函数 function __( $text, $domain = 'default' ) { return translate( $text, $domain ); } 返回一个字符串 ...

  4. Hibernate 实体对象三种状态 ：自由，持久，游离

    实体对象的状态及转化: 有了上面关于Hibernate缓存的知识,我们再来介绍实体对象的状态就非常容易理解了. A:自由态对象: 当我们通过Java的new关键字来生成一个实体对象时,这时这个实体对象 ...

  5. bash&nbsp;shell笔记4&nbsp;处理用…

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://twentyfour.blog.51cto.com/945260/521448 知 ...

  6. scala中存在的问题

    2017-12-27 scala学习中存在的问题: 1.表达式的概念要搞清楚 2.八种基本数据类型要搞清楚 Byte\Short\Int\Long\Char\Boolean\Double\Float都 ...

  7. xml和configparser模块

    一.xml模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单, 但至今很多传统公司如金融行业的很多系统的接口还主要是xml. xml的格式如下,就是通过 ...

  8. Windows：condition_variable 两个例子

    题目:子线程循环 10 次,接着主线程循环 100 次,接着又回到子线程循环 10 次,接着再回到主线程又循环 100 次,如此循环50次,试写出代码.注意:一定是子线程先执行,主线程再执行. #in ...

  9. SSL认证

    SSL认证 单向认证 1.发一串消息个对方 2.对方用私钥加密后返回 3.本方用对方的公钥解密,验证消息是否正确, 如果消息相同,则本方认可对方 双向认证 本方认证对方 对方认证本方

  10. Opennebula自定义VM 实现方法-Contextualizing Virtual Machines 2.2

    from:http://archives.opennebula.org/documentation:archives:rel2.2:cong There are two contextualizati ...