攝像頭快照到畫布

我想創建一些小的攝像頭工具，讓你用疊加拍攝快照。現在我一直在使用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

攝像頭快照到畫布

回答

相關問題