html5: copia una tela per immagine e ritorno

Question

Ho implementato una funzione di zoom in e out su un elemento canvas. funziona ridimensionando la tela, traducendola e quindi ridisegnando nuovamente l'intera scena. il problema è che ci vuole un sacco di tempo per ridisegnare tutto perché ho un sacco di cose sulla mia tela.

Ho bisogno di un modo per copiare la tela su un oggetto immagine e di copiare nuovamente l'immagine sulla tela senza perdere qualità. quali sono i metodi specifici per copiare la tela su una variabile javascript e per copiare di nuovo questa variabile sulla tela in un secondo momento?

Sarò felice se scriverò il codice perché non ho trovato alcuna buona spiegazione su Internet.

grazie,

Answer 1

Il metodo drawImage() possono disegnare una tela utilizzando un'altra tela invece di un'immagine.

È possibile creare una tela di "backup", delle stesse dimensioni dell'originale, disegnare la prima su di essa e quindi disegnarla nuovamente all'originale quando è necessaria.

ad es.

// Assume we have a main canvas 
// canvas = <main canvas> 
ctx = canvas.getContext('2d'); 
.. 

// create backing canvas 
var backCanvas = document.createElement('canvas'); 
backCanvas.width = canvas.width; 
backCanvas.height = canvas.height; 
var backCtx = backCanvas.getContext('2d'); 

// save main canvas contents 
backCtx.drawImage(canvas, 0,0); 

.. 

// restore main canvas 
ctx.drawImage(backCanvas, 0,0); 

Answer 2

Ci sono alcuni modi per farlo theres le getImageData e putImageData metodi Reference, tuttavia putImageData e getImageData sono piuttosto lento. Un altro modo è di salvare i dati in un image in memoria e richiamarli da quello che è molto più veloce, quindi la terza è quella sopra menzionata da andrewmu che implica la copia su un altro elemento canvas. Ho incluso esempi per il primo e il secondo tipo.

Image in memory method

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    savedData = new Image(); 

function save(){ 
    // get the data 
    savedData.src = canvas.toDataURL("image/png"); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.drawImage(savedData,0,0) 
} 

getImageData putImageData method

// Setup our vars, make a new image to store the canvas data 
var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    canvasData = ''; 

function save(){ 
    // get the data 
    canvasData = ctx.getImageData(0, 0, 100, 100); 
} 

function restore(){ 
    // restore the old canvas 
    ctx.putImageData(canvasData, 0, 0); 
} 

Answer 3

immagine aggiunta in tela

var image = new Image(); 
image.src = "1.jpg"; 
image.onload = function() { 
context.drawImage(image, 0, 0); 
};