it-swarm-eu.dev

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

Je voudrais copier TOUT le contenu d'un canevas et le transférer dans un autre, côté client. Je penserais que j'utiliserais la méthode canvas.toDataURL() et context.drawImage() pour implémenter ceci, mais je rencontre quelques problèmes.

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

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

J'ai examiné certaines questions connexes: Afficher une image d'une toile à une autre à l'aide de base64

Mais les solutions ne semblent pas être correctes.

112
J Kao

En fait, vous n'avez pas du tout besoin de créer une image. drawImage() acceptera un objet Canvas ainsi qu'un objet 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);

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

Notez que sourceCanvas peut être un HTMLImageElement , HTMLVideoElement , ou un HTMLCanvasElement . Comme mentionné par Dave dans un commentaire sous cette réponse, vous ne pouvez pas utiliser un contexte de dessin sur toile comme source . Si vous avez un contexte de dessin de canevas à la place de l'élément de canevas à partir duquel il a été créé, il est fait référence à l'élément de canevas d'origine dans le contexte sous context.canvas.

Voici un jsPerf pour montrer pourquoi c’est la seule façon de cloner une toile: http://jsperf.com/copying-a-canvas-element

241
Robert Hurst