Piszę aplikację, w której na stronie mogą znajdować się setki obrazów. Zamiast mieć nadmiar indywidualnego etapu dla każdego płótna, postanowiłem mieć edytor, który przechowuje scenę. Po zakończeniu edycji należy skopiować treść scen na inny obszar roboczy.

Stage oferuje toImage i toDataURL, aby zdobyć zawartość, jednak zgodnie z tym testem wydajności, obie te metody będą bardzo powolne w porównaniu z context.drawImage.

Widzieć:http://jsperf.com/copying-a-canvas-element

Ponieważ używam tylko jednej warstwy na scenie, a warstwa zawiera płótno, pomyślałem, że mogę to zrobić:

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

niestety nie przynosi to żadnych rezultatów (jednak działa)

Ponieważ scena ma buforCanvas, próbowałem również:

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

Znowu brak wyników, chociaż widzę zawartość na płótnie scenicznym na stronie.

Jeśli jednak przekopię się na mojej stronie, aby dostać się do rzeczywistego płótna utworzonego i używanego przez kineticjantów:

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

Dostaję wyniki. Jaki jest właściwy sposób kopiowania treści scen kineticjów na inne płótno?