html5 : 캔버스를 이미지에 복사하고 뒤로

Question

캔버스 요소에 확대/축소 기능을 구현했습니다. 캔버스 크기를 조정하고 변환 한 다음 전체 장면을 다시 그려서 작동합니다. 문제는 캔버스에서 많은 것을 얻었 기 때문에 모든 것을 다시 그리는 데 많은 시간이 걸리는 것입니다.

캔버스를 이미지 개체에 복사하고 품질을 떨어 뜨리지 않고 이미지를 캔버스로 다시 복사하는 방법이 필요합니다. 자바 스크립트 변수에 캔버스를 복사하고 나중에이 변수를 캔버스로 다시 복사하는 구체적인 방법은 무엇입니까?

인터넷을 통해 좋은 설명을 찾을 수 없기 때문에 코드를 적어두면 기쁠 것입니다.

감사

Answer 1

의 drawImage() 메소드는 다른 캔버스 대신 화상을 이용 캔버스에 그릴 수있다.

원본과 크기가 같은 '백업'캔버스를 만든 다음 첫 번째 캔버스를 그려 놓은 다음 필요할 때 원본을 다시 그릴 수 있습니다.

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

는 getImageData 및 putImageData 방법 Reference, 그러나 putImageData 및 getImageData을 프로그래머 할 수있는 몇 가지 방법이 있습니다 꽤 느리다. 또 다른 방법은 메모리에있는 image에 데이터를 저장하고 훨씬 빠른 데이터를 호출하는 것입니다. 그런 다음 세 번째 방법은 다른 캔버스 요소에 복사하는 andrewmu에서 언급 한 위의 방법입니다. 나는 첫 번째와 두 번째 유형에 대한 예제를 포함시켰다.

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

캔버스에

추가 이미지

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