0

目前我正在制作一个色度键 HTML5 相机测试应用程序。

http://jsfiddle.net/XuScp/

目前它有点工作（它会在你的背景中选择绿色并像任何其他色度键一样将其删除，目前我取出绿色并将其替换为一种灰色作为我目前拥有的背景）。

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

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;
    }

}
4

2 回答 2

0

据我所知，您只绘制this.ctxOutput.drawImage(bckg,0,0);一次背景（），那是在doLoad函数期间。您的循环确实将更改后的视频绘制到ctxOutput看似正确的位置，它只是不会在下一个循环中重新绘制背景。这可能是原因。

还，

我不会为每个循环绘制背景，而是使用 Image 或 Canvas 元素将图像简单地放在主画布后面。您已经使绿色像素透明，因此您应该能够通过主画布看到所有内容。我可能会从设置每个的 z-index 开始，并且可能将它们style.position的 s 设置为'absolute'以确保一个正好在另一个后面。

这将消除由于在每个循环中将背景图像绘制到同一画布而导致的任何延迟。

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

我希望这会有所帮助！

真挚地，

疯狂的人

于 2013-04-10T03:22:41.873 回答
0

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

我相信你已经看过这个mozilla tut on chroma key 了。

Jeffrey Burtoft 对此也有一个循序渐进的步骤。

希望这可以帮助。

于 2013-05-09T05:47:59.240 回答