Cómo copiar el contenido de un canvas a otro canvas localmente

Me gustaría copiar TODOS los contenidos de un canvas y transferirlos a otro todo en el lado del cliente. Creo que usaría el canvas.toDataURL() y context.drawImage() para implementar esto, pero me estoy encontrando con algunos problemas.

Mi solución sería obtener Canvas.toDataURL() y almacenar esto en un objeto Image en Javascript, y luego usar el método context.drawImage() para colocarlo nuevamente.

Sin embargo, creo que el método toDataURL devuelve una etiqueta codificada de 64 bits con "data:image/png;base64," de ella. Esto no parece ser una etiqueta válida, (siempre podría usar algunos RegEx para eliminar esto), pero es esa cadena codificada de 64 bits DESPUÉS de la "data:image/png;base64," substring una imagen válida? ¿Puedo decir image.src=iVBORw...ASASDAS , y dibujar esto de nuevo en el canvas?

He analizado algunos problemas relacionados: mostrar la imagen del canvas de un canvas a otro canvas usando base64

Pero las soluciones no parecen ser correctas.

En realidad, no es necesario crear una imagen en absoluto. drawImage() aceptará un Canvas así como un objeto de 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 más rápido que usar un objeto ImageData o elemento Image .

Tenga en cuenta que sourceCanvas puede ser un HTMLImageElement , HTMLVideoElement o un HTMLCanvasElement . Como menciona Dave en un comentario debajo de esta respuesta, no puede usar un contexto de dibujo de canvas como su fuente . Si tiene un contexto de dibujo de canvas en lugar del elemento canvas desde el que se creó, hay una referencia al elemento canvas original en el contexto bajo context.canvas .

Aquí hay un jsPerf para demostrar por qué esta es la única manera correcta de clonar un canvas: http://jsperf.com/copying-a- canvas- element

@ robert-hurst tiene un enfoque más limpio, pero esta solución se puede usar en lugares en los que realmente desea tener una copia de la Url de datos después de copiar. Ejemplos: cuando está construyendo un sitio web que usa muchas operaciones de imagen / canvas.

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

Me las arreglé para que funcione, lo que hice parece correcto:

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

(Arriba URL es un ejemplo)

 context.drawImage(testImg,0,0); 

Esto parece funcionar cuando lo ejecuto en la consola en Chrome y FireBug