Est-il possible de cloner l'élément HTML5 canvas avec son contenu ?

Question

Existe-t-il un moyen de créer une copie profonde de l'élément CANVAS avec tout le contenu dessiné ?

Answer 1

En fait, la façon correcte de copier les données du canevas est de passer l'ancien canevas au nouveau canevas vierge. Essayez cette fonction.

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;
}

L'utilisation de getImageData sert à accéder aux données des pixels, et non à copier des toiles. Copier avec cette méthode est très lent et difficile pour le navigateur. Il faut l'éviter.

Answer 2

Vous pouvez appeler

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

qui renverra un objet ImageData. Celui-ci possède une propriété nommée données de type CanvasPixelArray qui contient les valeurs rgb et de transparence de tous les pixels. Ces valeurs ne sont pas des références au canevas et peuvent donc être modifiées sans affecter le canevas.

Si vous souhaitez également obtenir une copie de l'élément, vous pouvez créer un nouvel élément de toile, puis copier tous les attributs dans le nouvel élément de toile. Après cela, vous pouvez utiliser la fonction

context.putImageData(imageData, 0, 0);

pour dessiner l'objet ImageData sur le nouvel élément du canevas.

Voir cette réponse pour plus de détails getPixel de HTML Canvas ? sur la manipulation des pixels.

Cet article de Mozilla pourrait également vous être utile. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes