opencv.js双边滤波磨皮处理

ゞ浴缸里的玫瑰 2021-12-13 01:33 501阅读 0赞

![1128866-20190603145515401-1546718141.png][]

<!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" οnlοad="onOpenCvReady();" type="text/javascript"></script>
    </body>
    
    </html>

代码地址：[https://github.com/dnoyeb/opencv-js][https_github.com_dnoyeb_opencv-js]

转载于:https://www.cnblogs.com/ckAng/p/10967599.html

[1128866-20190603145515401-1546718141.png]: /images/20211210/417a69304f094de1b97e382807699229.png
[https_github.com_dnoyeb_opencv-js]: https://github.com/dnoyeb/opencv-js