Javascript 在HTML5画布上绘制两幅图像

目前我正在制作一款Chroma Key HTML5摄像头测试应用程序

目前它可以正常工作（它会在你的背景中选择绿色，然后像其他色度键一样删除它，目前我去掉了绿色，换成了灰色，因为这是我目前的背景）

我遇到的问题是在相机所在的画布上绘制背景。目前，它绘制到画布上，但一旦相机加载，图像就会消失，我猜这将被相机取代

var bckg;
    bckg = new Image();
    bckg.src = 'https://raw.github.com/haywars/greenscreen/master/cambackgrounds/background1.jpg';
    function getImage(url){
        bckg= new Image();
        bckg.src = url;
    };

var processes = {
    timerCallback: function() {
        if (this.myVideo.paused || this.myVideo.ended) {
            return;
        }
        this.ctxInput.drawImage(this.myVideo, 0, 0, this.width, this.height);
        this.pixelScan();
        var self = this;
        setTimeout(function () {
            self.timerCallback();
        }, 0);
    },


    doLoad: function() {
        var video = document.querySelector('video');
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        this.myVideo = document.getElementById("myVideo");
        this.cInput = document.getElementById("cInput");
        this.ctxInput = this.cInput.getContext("2d");
        this.cOutput = document.getElementById("cOutput");
        this.ctxOutput = this.cOutput.getContext("2d");
        var self = this;
        this.ctxOutput.drawImage(bckg,0,0);
        this.myVideo.addEventListener("playing", function() {
            self.width = self.myVideo.videoWidth;
            self.height = self.myVideo.videoHeight;
            self.timerCallback();
        }, false);
    },
    pixelScan: function() {
        var frame = this.ctxInput.getImageData(0, 0, this.width, this.height);
        for (var i = 0; i < frame.data.length; i++) {
            var r = frame.data[i];
            var g = frame.data[i+1];
            var b = frame.data[i+2];
            if (g > 0 && r > 50   && r < 165 && b < 60)
            frame.data[i + 3] = 0;
        }
        this.ctxOutput.putImageData(frame, 0, 0);

        //var img= new Image();
        //img.src = "images/cambackgrounds/background1.jpg";
        //this.ctxOutput.putImageData(img, 0, 0);
        return;
    }

}

var-bckg；
bckg=新图像（）；
bckg.src=https://raw.github.com/haywars/greenscreen/master/cambackgrounds/background1.jpg';
函数getImage（url）{
bckg=新图像（）；
bckg.src=url；
};
var进程={
timerCallback:函数（）{
如果（this.myVideo.paused | | this.myVideo.end）{
返回；
}
this.ctxInput.drawImage（this.myVideo，0，0，this.width，this.height）；
这是pixelScan（）；
var self=这个；
setTimeout（函数（）{
self.timerCallback（）；
}, 0);
},
doLoad:function（）{
var video=document.querySelector（'video'）；
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
this.myVideo=document.getElementById（“myVideo”）；
this.cInput=document.getElementById（“cInput”）；
this.ctxInput=this.cInput.getContext（“2d”）；
this.cOutput=document.getElementById（“cOutput”）；
this.ctxOutput=this.cOutput.getContext（“2d”）；
var self=这个；
这个.ctxOutput.drawImage（bckg，0,0）；
this.myVideo.addEventListener（“播放”，函数（）{
self.width=self.myVideo.videoWidth；
self.height=self.myVideo.videoHeight；
self.timerCallback（）；
}，假）；
},
像素扫描：函数（）{
var frame=this.ctxInput.getImageData（0，0，this.width，this.height）；
对于（var i=0；i0&&r>50&&r<165&&b<60）
帧数据[i+3]=0；
}
this.ctxOutput.putImageData（帧，0，0）；
//var img=新图像（）；
//img.src=“images/cambackgrounds/background1.jpg”；
//这个.ctxOutput.putImageData（img，0，0）；
返回；
}
}

据我所知，您只需绘制一次背景（

this.ctxOutput.drawImage（bckg，0,0）；

），这是在

doLoad

功能期间。您的循环确实将修改后的视频绘制到

ctxOutput

上，看起来似乎是正确的，只是在下一个循环中没有重新绘制背景。这可能就是原因

而且

我不会为每个循环绘制背景，而是简单地将图像放在主画布后面，使用图像或画布元素。您已经在使绿色像素透明，因此您应该能够通过主画布查看所有内容。我可以先设置每一个的z索引，也可以将它们的

样式设置为
'absolute'
，以确保一个在另一个后面

这将消除在每个循环中将背景图像绘制到同一画布时可能产生的任何延迟

我遇到过多个教程和基准测试，建议使用画布进行分层。背景通常是静态的，为什么要不断地更新呢。让它成为自己的画布。一层在另一层之上，每个层包含特定类型的元素（静态、匀速运动、独立运动等），以确保最大性能

我希望这能有所帮助

真诚地

TheCrzyMan
@shayward-我同意@TheCrzyMan，使用隐藏和显示画布标签来chromakey

我相信你已经看到了

杰弗里·伯托夫对此也有自己的看法

希望这有帮助