Question

我正在尝试创建一些小型网络摄像头工具，让您拍摄带有叠加层的快照。现在我一直在使用html5画布并使网络摄像头正常工作。但每当我尝试保存网络摄像头快照时，它只会加载网络摄像头快照或覆盖图，而不是两者都加载。

我一直在尝试一些这是我能得到的最接近的东西：

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个画布上绘制两个图像，并让叠加层位于视频的顶部。

这是我到目前为止的一个方面：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

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

网络摄像头快照到画布

1 个答案: