Question

我已经设置了一个带有网络摄像头，HTML5视频和画布的绿色屏幕。我从MDN那里想到了创建色度键（绿屏）的想法。但是使用现场网络摄像头而不是预先录制的视频。一切都按预期工作，除非我去保存图像，色度键区域是白色而不是透明。有海洋的背景。当摄像头打开并且有人站在它前面时，看起来这个人在海洋中。再次，保存该图像只是给我一个白色的盒子，我自己在它的中间。网络摄像头尺寸为640 x 480，画布尺寸为1600 x 800.

编辑：我将色度键容差更改为任何深灰色及以上。现在，如果你在相机前放置一些白色的东西，理论上它应该显示整个背景图像。但它的左侧是640x480的盒子，颜色与<body>相同。

Here is a demo除非你背景中有绿色，否则不起作用。仅限Webkit。

网络摄像头色度键：

var processor = {
timerCallback: function() {
    if (this.webcam.paused || this.webcam.ended) {          
        return;
    }
    this.computeFrame();
    var self = this;
    setTimeout(function () {
        self.timerCallback();
    }, 0);
},
doLoad: function() {
    this.webcam = document.getElementById("webcam");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");       
    var self = this;
    this.webcam.addEventListener("play", function() {
        self.width = 640;
        self.height = 480;
        self.timerCallback();
    }, false);
},
computeFrame: function() {
    this.ctx1.drawImage(this.webcam, 0, 0, 640, 480); //draw webcam to canvas
    var frame = this.ctx1.getImageData(0, 0, 640, 480); //capture a frame
    var l = frame.data.length / 4;
    for (var i = 0; i < l; i++) { //loop through pixels
        var r = frame.data[i * 4 + 0];
        var g = frame.data[i * 4 + 1];
        var b = frame.data[i * 4 + 2];
        if (g > 100 && r < 95 && b > 60 && b < 160 ){
            frame.data[i * 4 + 3] = 0;
        }
    }               
    this.ctx2.putImageData(frame, 480, 300); //place chroma video over bg img
    return;
}
};

的script.js

processor.doLoad();

//more stuff runs

takePicture();

function takepicture() {    
    var canv = document.getElementById('c2');               
    var photo = document.querySelector('#inptPhoto');
    var data = canv.toDataURL('image/png');
    photo.setAttribute('src', data);
}

我发现另一篇SO帖子显示我的图片实际上可能不是透明的，而是背景中的白色，这与我的结果一致。还有另一种方法吗？

色度键HTML网络摄像头不会保存透明度

0 个答案: