Come copiare localmente il contenuto di una tela su un'altra tela

Vorrei copiare TUTTI i contenuti di una tela e trasferirli su un altro tutto sul lato client. Penso che utilizzerei il metodo canvas.toDataURL()e context.drawImage()per implementarlo, ma sto riscontrando alcuni problemi.

La mia soluzione sarebbe quella di ottenere Canvas.toDataURL()e memorizzare questo in un oggetto Image in Javascript, quindi utilizzare il context.drawImage()metodo per rimetterlo.

Tuttavia, credo che il toDataURLmetodo restituisca un tag codificato a 64 bit con "data:image/png;base64,"anteposto. Questo non sembra essere un tag valido, (potrei sempre usare un po 'di RegEx per rimuoverlo), ma quella stringa codificata a 64 bit DOPO la "data:image/png;base64,"sottostringa è un'immagine valida? Posso dirlo image.src=iVBORw...ASASDASe riportarlo sulla tela?

Ho esaminato alcuni problemi correlati: Visualizza l'immagine della tela da una tela a un'altra tela utilizzando base64

Ma le soluzioni non sembrano essere corrette.

In realtà non devi creare affatto un'immagine. drawImage()accetterà Canvassia un Imageoggetto.

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

Molto più veloce che usare un ImageDataoggetto o un Imageelemento.

Tieni presente che sourceCanvaspuò essere un HTMLImageElement , HTMLVideoElement o un HTMLCanvasElement . Come accennato da Dave in un commento sotto questa risposta, non è possibile utilizzare un contesto di disegno su tela come fonte . Se hai un contesto di disegno su tela invece dell'elemento tela da cui è stato creato, c'è un riferimento all'elemento tela originale nel contesto sotto context.canvas.

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

@ robert-hurst ha un approccio più pulito.

Tuttavia, questa soluzione può essere utilizzata anche in luoghi in cui si desidera effettivamente avere una copia di Data Url dopo la copia. Ad esempio, quando si crea un sito Web che utilizza molte operazioni di immagine / tela.

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