Un moyen de cloner l'élément canvas HTML5 avec son contenu?
Existe-t-il un moyen de créer une deep copie d'un élément de toile avec tout le contenu dessiné?
2 réponses
en fait, la bonne façon de copier les données de la toile est de passer l'ancienne toile à la nouvelle toile 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;
}
utilisant getImageData est pour l'accès aux données de pixel, pas pour copier des toiles. Copier AVEC est très lent et difficile sur le navigateur. Il devrait être évitée.
vous pouvez appeler
context.getImageData(0, 0, context.canvas.width, context.canvas.height);
qui renvoie un objet ImageData. Il s'agit d'une propriété appelée data de type CanvasPixelArray qui contient les valeurs rgb et de transparence de tous les pixels. Ces valeurs ne sont pas des références à la toile et peuvent donc être modifiées sans affecter la toile.
si vous voulez aussi une copie de l'élément, vous pouvez créer un nouvel élément canvas et ensuite copier tous les attributs vers le nouveau élément canvas. Après cela, vous pouvez utiliser le
context.putImageData(imageData, 0, 0);
méthode pour dessiner L'objet ImageData sur le nouvel élément canvas.
voir cette réponse pour plus de détails getPixel from HTML Canvas? sur la manipulation des pixels.
vous pourriez trouver cet article de mozilla utile aussi bien https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes