html5: resme ve tekrar bir kanvas kopyalayın

Question

Bir tuval öğesinde yakınlaştırma ve uzaklaştırma işlevini uyguladım. tuvali ölçekleyerek, çevirerek ve tüm sahneyi yeniden çizerek çalışır. problemi, her şeyi yeniden çizmenin çok zaman almasıdır çünkü tuvalimde birçok şey var.

Tuvali bir görüntü nesnesine kopyalamanın ve görüntüyü kaliteden ödün vermeden tekrar kanvasına kopyalamanın bir yoluna ihtiyacım var. Tuvali bir javascript değişkenine kopyalamak ve bu değişkeni daha sonra tuvale kopyalamak için özel yöntemler nelerdir?

Kodu yazdığınızda internet üzerinden iyi bir açıklama bulamadığım için memnun olacağım.

sayesinde

Answer 1

drawImage() yöntemi bir tuval yerine bir resim ve bir tuval çizebilir.

Orijinalinizle aynı boyutta bir 'yedek' tuval yaratabilirsiniz, ilkini oraya sürükleyin ve sonra gerektiğinde orijinali geri çekin.

örn.

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

o getImageData ve putImageData yöntemleri Reference Ancak putImageData ve getImageData gidecekseniz yapmak için birkaç yol vardır oldukça yavaştır. Başka bir yol ise, verileri bir image belleğe kaydetmek ve daha hızlı olandan hatırlatmak, sonra üçüncü yol ise, bir başka tuval öğesine kopyalamayı içeren andrewmu tarafından belirtilmektedir. Birinci ve ikinci tip için örnekler ekledim.

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

tuval içine

eklenen görüntü

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