Yocker
  1. Yocker
  3. Come copiare il contenuto di una canvas su un’altra canvas localmente
Intereting Posts
Come posizionare i file object in una sottodirectory separata Tabella JavaFX: come aggiungere componenti? Funzione annidata di JavaScript Perché questo codice Java generico non verrà compilato? C / C ++: ottimizzazione dei puntatori alle costanti di stringa Calcolo dei giorni tra due date con Java Come rimuovere l’ultimo carattere da una stringa? Come determinare se un decimale / doppio è un numero intero? git reset –hard HEAD lascia dietro i file non tracciati Convenzione di denominazione per getter / setter in Java Esiste un dplyr equivalente a data.table :: rleid? Vedere macro C espanse chiama multiprocessing nel metodo di class Python C’è una differenza tra x ++ e ++ x in java? Perché MVVM e quali sono i suoi principali vantaggi?

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