opencv.js OpenCV是一个基于BSD许可（开源）发行的跨平台计算机视觉库-BFW插件库

opencv.js OpenCV是一个基于BSD许可（开源）发行的跨平台计算机视觉库

opencv.js OpenCV是一个基于BSD许可（开源）发行的跨平台计算机视觉库，主要应用在人机互动、物体识别、图像分割、人脸识别、动作识别、运动跟踪、机器人、运动分析、机器视觉、结构分析、汽车安全驾驶。opencv.js是他的JavaScript版本

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=opencv&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            let imgElement = document.getElementById('imageSrc');
            let inputElement = document.getElementById('fileInput');
            inputElement.addEventListener('change', (e) => {
                imgElement.src = URL.createObjectURL(e.target.files[0]);
            }, false);

            var face2 = function (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;
            };
            imgElement.onload = function() {
                let mat = cv.imread(imgElement);
                mat = face2(mat, 4, 3);
                cv.imshow('canvasOutput', mat);
                mat.delete();
            };
            imgElement.src="/bfwrepo/image/mopi.png";


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


        });

    </script>
</head>
<body>
    <h2> OpenCV.js 人脸磨皮</h2>
    <p id="status">
        OpenCV.js is loading...
    </p>
    <div>
        <div class="inputoutput">
            <img id="imageSrc" alt="No Image"  />
            <div class="caption">
                选择图片后查看效果 <input type="file" id="fileInput" name="file" />
            </div>
        </div>
        <div class="inputoutput">
            <canvas id="canvasOutput"></canvas>
            <div class="caption">
                canvasOutput
            </div>
        </div>
    </div>

</body>
</html>

官网 https://docs.opencv.org/3.3.1/d0/d84/tutorial_js_usage.html