opencv.js双边滤波 磨皮处理

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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

 

posted @   dnoyeb  阅读(1267)  评论(4)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 张高兴的大模型开发实战：（一）使用 Selenium 进行网页爬虫
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手