web-dev-qa-db-fra.com

Est-il possible de cloner un élément de toile HTML5 avec son contenu?

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

javascripthtml5canvasclone
54
Evgenyt

En fait, la bonne façon de copier les données du canevas est de passer de 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 à l'accès aux données de pixels, pas à la copie de toiles. La copie est très lente et difficile sur le navigateur. Cela devrait être évité.

107
Robert Hurst

Tu peux appeler

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

qui renverra un objet ImageData. Cela a une propriété nommé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 au canevas et peuvent donc être modifiées sans affecter le canevas.

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

context.putImageData(imageData, 0, 0);

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 également trouver cet article mozilla utile https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

11
Castrohenge