捕獲完整的畫布圖像

Question

我正在尋找一種方法來捕獲完整的畫布（包括移到畫布外的元素）到圖像。我正在使用KineticJS庫，並且我知道toDataURL函數。問題是圖像被剪切到畫布邊界。

作爲一種解決方法，我認爲將畫布上的所有元素複製到一個足夠大的臨時隱藏畫布以適合所有元素，然後使用toDataURL函數。我想知道是否有更清潔的方法？

Answer 1

有趣的問題。我喜歡臨時的畫布想法。此外，您可以調整主畫布大小，對所有子元素應用偏移轉換，捕捉圖像，然後反向轉換並調整大小。這不會比複製到隱藏畫布更復雜。另外，單畫布方法會更有效率的記憶。

只是我3美分。

Answer 2

我會阿爾文同意，你可以只調整畫布，方法如下：

stage.setWidth(window.innerWidth); // inner width of your window 
stage.setHeight(window.innerHeight); // inner height of your window 
stage.draw(); //redraw 

這會調整你的舞臺，你的窗口的寬度和高度，但這不能解釋的可能性，元素會比你的窗口更遠，但是你可以修改.set函數中的數字來說明最右邊/最右邊的數字。

如果你正在尋找一個快速的方式在畫布的所有元素複製到另一個階段，你可以把它序列化：

var json = stage.toJSON(); 
    var newStage = Kinetic.Node.create(stageJson, 'newContainer');