Come copiare il contenuto di una canvas su un’altra canvas localmente

Mi piacerebbe copiare TUTTI i contenuti di una canvas e trasferirli su un altro tutto sul lato client. canvas.toDataURL() il canvas.toDataURL() e context.drawImage() per implementarlo, ma sto canvas.toDataURL() alcuni problemi.

La mia soluzione sarebbe quella di ottenere Canvas.toDataURL() e archiviarlo in un object Image in Javascript, e quindi usare il metodo context.drawImage() per rimetterlo.

Tuttavia, credo che il metodo toDataURL restituisca un tag codificato a 64 bit con "data:image/png;base64," anteposto a questo. Questo non sembra essere un tag valido, (potrei sempre usare qualche RegEx per rimuoverlo), ma è quella stringa codificata a 64 bit DOPO "data:image/png;base64," sottostringa un’immagine valida? Posso dire image.src=iVBORw...ASASDAS e disegnarlo di nuovo sulla canvas?

Ho esaminato alcuni problemi correlati: visualizza l’immagine della canvas da una canvas all’altra utilizzando base64

Ma le soluzioni non sembrano essere corrette.

In realtà non è necessario creare un’immagine. drawImage() accetta una Canvas e 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 più veloce dell’utilizzo di un object ImageData o di un elemento Image .

Si noti che sourceCanvas può essere un HTMLImageElement , HTMLVideoElement o un HTMLCanvasElement . Come menzionato da Dave in un commento sotto questa risposta, non è ansible utilizzare un contesto di disegno su canvas come fonte . Se si dispone di un contesto di disegno su canvas invece dell’elemento canvas da cui è stato creato, esiste un riferimento all’elemento canvas originale sul contesto in context.canvas .

Ecco un jsPerf per dimostrare perché questo è l’unico modo giusto per clonare una canvas: http://jsperf.com/copying-a-canvas-element

@ robert-hurst ha un approccio più pulito, ma questa soluzione può essere utilizzata in luoghi quando si desidera effettivamente avere una copia di Data Url dopo la copia. Esempi: quando si costruisce un sito Web che utilizza molte operazioni di immagine / 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; 

Sono riuscito a farlo funzionare, quello che ho fatto sembra corretto:

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

(Sopra l’URL è un esempio)

 context.drawImage(testImg,0,0); 

Questo sembra funzionare quando lo eseguo sulla console in Chrome e FireBug