Gibt es eine Möglichkeit, das HTML5-Canvas-Element mit seinem Inhalt zu klonen?

Question

Gibt es eine Möglichkeit, eine tiefe Kopie eines Canvas-Elements mit allen gezeichneten Inhalt zu erstellen?

Answer 1

Eigentlich der richtige Weg, um die Leinwand Daten zu kopieren, ist die alte Leinwand auf die neue leere Leinwand zu übergeben. Probieren Sie diese Funktion aus.

function cloneCanvas(oldCanvas) { 

    //create a new canvas 
    var newCanvas = document.createElement('canvas'); 
    var context = newCanvas.getContext('2d'); 

    //set dimensions 
    newCanvas.width = oldCanvas.width; 
    newCanvas.height = oldCanvas.height; 

    //apply the old canvas to the new one 
    context.drawImage(oldCanvas, 0, 0); 

    //return the new canvas 
    return newCanvas; 
} 

Verwenden von getImageData ist für den Zugriff auf Pixeldaten, nicht zum Kopieren von Leinwänden. Das Kopieren mit dem Browser ist sehr langsam und schwer. Es sollte vermieden werden.

Answer 2

können Sie

context.getImageData(0, 0, context.canvas.width, context.canvas.height); 

nennen, die ein Objekt Imagedata zurückkehren wird. Dies hat eine Eigenschaft mit dem Namen Daten des Typs CanvasPixelArray, die die RGB- und Transparenzwerte aller Pixel enthält. Bei diesen Werten handelt es sich nicht um Verweise auf die Arbeitsfläche, sodass sie geändert werden können, ohne die Arbeitsfläche zu beeinflussen.

Wenn Sie auch eine Kopie des Elements möchten, können Sie ein neues Canvas-Element erstellen und dann alle Attribute in das neue Canvas-Element kopieren. Danach können Sie das ImageData-Objekt mit der

-Methode auf das neue Canvas-Element zeichnen.

Finden Sie diese Antwort für weitere Details getPixel from HTML Canvas? bei der Manipulation der Pixel.

Sie können diesen Artikel mozilla nützlich finden https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes