Comment copier le contenu d’un canevas sur un autre canevas localement

Je voudrais copier TOUS les contenus d’un canevas et les transférer tous sur le côté client. Je pense que j’utiliserais la canvas.toDataURL() et canvas.toDataURL() pour l’implémenter, mais je rencontre quelques problèmes.

Ma solution serait d’obtenir Canvas.toDataURL() et de le stocker dans un object Image en Javascript, puis d’utiliser la méthode context.drawImage() pour le replacer.

Cependant, je crois que la méthode toDataURL retourne une balise codée de 64 bits avec "data:image/png;base64," . Cela ne semble pas être une balise valide (je pourrais toujours utiliser un peu de RegEx pour le supprimer), mais cette chaîne codée sur 64 bits est-elle APRÈS la sous-chaîne "data:image/png;base64," une image valide? Puis-je dire image.src=iVBORw...ASASDAS , et le dessiner sur la canvas?

J’ai examiné quelques problèmes connexes: Afficher l’image de la canvas d’une canvas sur une autre canvas à l’aide de base64

Mais les solutions ne semblent pas être correctes.

En fait, vous n’avez pas à créer d’image. drawImage() acceptera un Canvas ainsi qu’un object Image .

 //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);

ImageData plus rapide que d’utiliser un object ImageData ou un élément Image .

Notez que sourceCanvas peut être HTMLImageElement , HTMLVideoElement ou HTMLCanvasElement . Comme mentionné par Dave dans un commentaire ci-dessous, 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 existe une référence à l’élément de canevas d’origine dans le contexte, sous context.canvas .

Voici un jsPerf pour démontrer pourquoi c’est le seul moyen de cloner un canevas: http://jsperf.com/copying-a-canvas-element

@ robert-hurst a une approche plus propre, mais cette solution peut être utilisée dans des endroits où vous voulez réellement avoir une copie de Data Url après la copie. Exemples: lorsque vous créez un site Web qui utilise beaucoup d’opérations image / canevas.

  // select canvas elements var sourceCanvas = document.getElementsById("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;

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