Comment copier localement le contenu d'un canevas vers un autre canevas ?

Question

J'aimerais copier TOUT le contenu d'un canevas et le transférer dans un autre, le tout du côté client. Je pense que je devrais utiliser la fonction canvas.toDataURL() y context.drawImage() pour mettre en œuvre cette méthode, mais je me heurte à quelques problèmes.

Ma solution serait d'obtenir Canvas.toDataURL() et le stocker dans un objet Image en Javascript, puis utiliser la fonction context.drawImage() pour le replacer.

Cependant, je crois que le toDataURL renvoie une balise codée à 64 bits avec "data:image/png;base64," en préambule. Cela ne semble pas être une balise valide (je pourrais toujours utiliser une RegEx pour la supprimer), mais cette chaîne codée en 64 bits APRÈS la balise "data:image/png;base64," La sous-chaîne est une image valide ? Puis-je dire image.src=iVBORw...ASASDAS et le dessiner à nouveau sur la toile ?

J'ai examiné certaines questions connexes : Afficher l'image d'un canevas vers un autre canevas en utilisant base64

Mais les solutions ne semblent pas être correctes.

Answer 1

En fait, vous n'avez pas besoin de créer une image du tout. drawImage() acceptera un Canvas ainsi qu'un Image objet.

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

Bien plus rapide que l'utilisation d'un ImageData ou Image élément.

Notez que sourceCanvas peut être un HTMLImageElement , HTMLVideoElement ou un HTMLCanvasElement . Comme indiqué par Dave dans un commentaire sous cette réponse, vous vous ne pouvez pas utiliser un contexte de dessin de canevas comme source . Si vous avez un contexte de dessin de canevas au lieu de l'élément de canevas à partir duquel il a été créé, il y a une référence à l'élément de canevas original sur le contexte sous context.canvas .

Voici un jsPerf pour démontrer pourquoi c'est la seule bonne façon de cloner un canvas : http://jsperf.com/copying-a-canvas-element

Answer 2

@robert-hurst a une approche plus propre.

Cependant, cette solution peut également être utilisée, dans les cas où vous voulez réellement avoir une copie de Data Url après la copie. Par exemple, lorsque vous construisez un site Web qui utilise beaucoup d'opérations d'image/de toile.

    // select canvas elements
    var sourceCanvas = document.getElementById("some-unique-id");
    var destCanvas = document.getElementsByClassName("some-class-selector")[0];

    //copy canvas by DataUrl
    var sourceImageData = sourceCanvas.toDataURL("image/png");
    var destCanvasContext = destCanvas.getContext('2d');

    var destinationImage = new Image;
    destinationImage.onload = function(){
      destCanvasContext.drawImage(destinationImage,0,0);
    };
    destinationImage.src = sourceImageData;

Answer 3

J'ai réussi à le faire fonctionner, ce que j'ai fait semble correct :

testImage = new testImage();
testImage.src = data:image/png;base64,iVBORw0KG......kSZIkSZIkSZI0u/1/diDteJCiN80AAAAASUVORK5CYII=

(L'URL ci-dessus est un exemple)

context.drawImage(testImg,0,0);

Cela semble fonctionner lorsque je l'exécute sur la console dans Chrome et FireBug.