摄像头快照到画布

我想创建一些小的摄像头工具，让你用叠加拍摄快照。现在我一直在使用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个画布中绘制两个图像，并让叠加层位于视频的顶部。

这里是什么，我至今一的jsfiddle：http://jsfiddle.net/Px8g3/

来源

2014-05-09 user2099810

我没有用画布工作太多，但是不是你的代码在另一个顶部绘制图像？所以你总是只有1个？或者你的传情透明吗？ – zozo

传情影像是半透明的，但我不明白为什么它不会加载两个图像： -/ – user2099810

有事件处理程序设置为BEFORE设置src。有风格='位置：绝对'的视频和画布。最后，在保存时，也可以绘制图像。 – GameAlchemist

你应该这样做：拉丝前

context.globalCompositionOperation = "source-atop"

（或1战平后，尝试这两种）

要更精确：

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

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

来源

2014-05-09 12:52:28 Larta

感谢您的评论！我认为这确实解决了分层问题，但我的主要问题是，我无法在画布上弹出两个图像，只是其中一个。所以我只能加载摄像头快照，或者我只能加载这是主要问题的覆盖。但我会保留你的代码以供将来参考 – user2099810

我发布的代码应该做你想要的。绘制视频图层，然后调用我所说的，然后绘制覆盖图 – Larta

哦，我的坏，我仍然在context.drawImage（v，teaser，0，0，w，h）的传情。干杯!你让我的一天 – user2099810

摄像头快照到画布

回答

相关问题