html5: copiar un lienzo de la imagen y volver

Question

que tiene implantado un zoom dentro y fuera de función en un elemento canvas. funciona escalando el lienzo, traduciéndolo, y luego vuelve a dibujar toda la escena. el problema es que lleva mucho tiempo volver a dibujar todo porque tengo muchas cosas en mi lienzo.

necesito una manera de copiar el lienzo a un objeto de imagen y de copiar la imagen de nuevo a la lona sin perder calidad. ¿Cuáles son los métodos específicos para copiar el lienzo a una variable de javascript y para copiar esta variable al lienzo más tarde?

Me alegraré si usted escribe el código porque no podía encontrar ninguna buena explicación en internet.

gracias,

Answer 1

El método drawImage() pueden dibujar a un lienzo con otro lienzo en lugar de una imagen.

Se puede crear un lienzo 'copia de seguridad', del mismo tamaño que el original, dibujar el primero allí y luego dibujar que uno nuevo a la original cuando lo necesite.

p. Ej.

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

Hay algunas maneras de hacer que los theres getImageData y putImageData métodos Reference, Sin embargo putImageData y getImageData son bastante lento. Otra forma es guardar la información en un image en la memoria y recuperarla de la que es mucho más rápida, entonces la tercera forma es la mencionada anteriormente por andrewmu que implica copiar a otro elemento canvas. He incluido ejemplos para el primer y segundo 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

imagen añadida en lienzo

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