javascript - 网络摄像头快照到 Canvas

Question

我正在尝试创建一些小型网络摄像头工具，让您可以使用叠加层拍摄快照。现在我一直在使用 html5 Canvas 并让网络摄像头正常工作。但每当我尝试保存网络摄像头快照时，它只会加载网络摄像头快照或叠加层，而不会同时加载两者。

我一直在尝试一些事情，这是我能得到的最接近的结果:

var teaser = new Image();
teaser.src = "http://www.fillmurray.com/g/1200/1200";
teaser.onload = function() {
context.drawImage(teaser, 0, 0);
};    
context.drawImage(v, teaser, 0 , 0, w, h); // this only draws the image

// and

context.drawImage(v, 0 , 0, w, h); // this just draws the webcam snapshot

有谁知道这是否可能，或者我只是一个十足的白痴？所以我想要实现的是在 1 个 Canvas 中绘制两个图像，并让叠加层位于视频之上。

这是我迄今为止所拥有的jsfiddle:http://jsfiddle.net/Px8g3/

Answer 1

你应该这样做:

context.globalCompositionOperation = "source-atop"

抽奖之前(或第一次抽奖之后，两者都尝试一下)

更准确地说:

var teaser = new Image();
teaser.src = "http://www.fillmurray.com/g/1200/1200";
teaser.onload = function() {
context.drawImage(teaser, 0, 0);
};
//context.save(); Try with and without
context.globalCompositionOperation = "source-atop";
context.drawImage(v, 0 , 0, w, h); // Don't know what v is, but i guess it's an image
//context.restore(); Same

准确地说，这使 Canvas 处于“source-atop”模式。 这是什么意思 ？ 这意味着顶层(您绘制的第二个图像)是透明的，它将保留背景(视频)并绘制它。在其他地方，它将绘制您的第二层