如何在网络浏览器中创建二进制手膜？ -打开简历

Question

我正在尝试根据本文创建二进制手膜：https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0

但是我使用一个新版本的openCV编译为JavaScript，用于Web浏览器。在我的openCV版本中，cv.Vector不存在。我不知道如何替换cv.Vector功能。我一直在尝试重写函数skinColorUpper，skinColorLower。但是，效果不令人满意。如何正确编写这些功能？

    const canvasInput = document.getElementById("canvasInput");
    const canvasOutput = document.getElementById("canvasOutput");

    const skinColorUpper = (hue) => new cv.Mat(1, 1, cv.CV_8UC4,new cv.Scalar(hue,0.8 * 255, 0.6 * 255));
    const skinColorLower = (hue) => new cv.Mat(1, 1, cv.CV_8UC4,new cv.Scalar(hue,0.1 * 255, 0.05 * 255));

    const img = cv.imread(canvasInput);
    cv.cvtColor( img, imgHLS, cv.COLOR_BGR2HLS);
    const rangeMask = new cv.Mat();
    const up = skinColorUpper(15);
    const low = skinColorLower(0);

    cv.inRange(imgHLS, low, up, rangeMask);

    cv.imshow(canvasOutput, rangeMask);

输入：input image

HLS：HLS image

输出：output mask

Answer 1

的新版本

    function openCvReady() {
        cv['onRuntimeInitialized']=()=> {
            let src = cv.imread('canvasInput');

            let hls = new cv.Mat();
            cv.cvtColor(src, hls, cv.COLOR_BGR2HLS);

            let low = new cv.Mat(hls.rows, hls.cols, hls.type(), [0, 0.1 * 255, 0.05 * 255, 0]);
            let high = new cv.Mat(hls.rows, hls.cols, hls.type(), [15, 0.8 * 255, 0.6 * 255, 255]);

            let dst = new cv.Mat();

            cv.inRange(hls, low, high, dst);

            cv.imshow('canvasOutput', dst);
        };
    }

虽然所选参数不是很好。这是一个更好的选择：

            let low = new cv.Mat(hls.rows, hls.cols, hls.type(), [0, 0, 0, 0]);
            let high = new cv.Mat(hls.rows, hls.cols, hls.type(), [150, 250, 250, 255]);