javascript - 尝试使用javascript camgaze.js绘制drawImage，从摄像头实时检测人脸-不起作用

我正在尝试使用camgaze.js库将图像（mask.png）叠加在来自摄像头的实时视频上。 （http://aw204.host.cs.st-andrews.ac.uk/camgaze.js/）。所以基本上我只是复制了代码，我想根据需要对其进行修改。

来自网络摄像头的面部检测演示在这里（http://aw204.host.cs.st-andrews.ac.uk/camgaze.js/examples/face_detection.html）。

我可以在我的工作区中复制相同的内容。

现在，我想在调用putMask()函数时放置遮罩

function PutMask(){

        mask.onload = function() {
        alert('ht' + mask.height)
        alert('width' + mask.width)
        alert('src' + mask.src)
            var width = 640;
            var height = 480;
            var cGaze = new camgaze.Camgaze(width, height, "mirrorcanvas");
            var faceDetector = new camgaze.CVUtil.HaarDetector(
                camgaze.cascades.frontalface,
                width,
                height
            );  //takes classifier name, ImageWidth, ImageHeight

            var drawer = new camgaze.drawing.ImageDrawer();

            var frameOp = function (image_data, video) {
                var faceRects = faceDetector.detectObjects(
                    video,
                    1.1,
                    1
                );

                faceRects.forEach(

                    function (face) {

                       image_data = drawer.drawRectangle(
                            image_data,
                            face,
                            face.width,
                            face.height,
                            3,
                            "red"
                        );

                        context.drawImage(mask,100, 100);   // This line doesnt work

                    }
                );

                return image_data;
            };

            cGaze.setFrameOperator(frameOp);
        }

        mask.src = "/static/images/mask.png";
}

我能够看到我的脸部标记为红色矩形，这表明正在进行脸部检测。另外，我能够收到mask.height和mask.width的警报，这证明了掩模图像也在加载中。但是我无法使用context.drawImage(mask,100, 100);在我的脸上绘制遮罩图像。

我希望它是实时绘制的，并且每次绘制红色矩形时都应该在画布上重新绘制它。因此，基本上，面罩应该移动到面部的任何地方。

请帮忙。尽管我已经看到了许多使用Javascript的演示，但我发现如果将代码库复制粘贴到工作区中，代码将无法正常工作。这里出了什么问题。请帮忙。提前致谢 ：）

最佳答案

我认为上下文没有定义。如果要在每个面上遮罩图像，则应操作Camgaze.js传入的image_data对象，并应返回增强后的image_data。我很确定我在Camgaze.js的ImageDrawer对象中添加了一个drawImage方法。

关于javascript - 尝试使用javascript camgaze.js绘制drawImage，从摄像头实时检测人脸-不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25398991/