<img> 태그의 내용을 캔버스에 표시하는 방법은 무엇입니까?

Question

페이지에 <img> 태그와 캔버스 요소가 있습니다. <img> 안의 이미지가 잘리고 루페를 사용하여 조작됩니다. 이미지의 잘린 내용을 캔버스 내부에 어떻게 표시 할 수 있습니까?

Answer 1

image 인 <img> 태그가 있다고 가정합니다. getElementById 방법을 사용하여 이미지 참조를 얻을 수 있습니다. 다음과 같은 뭔가 :

var img = document.getElementById("image"); 

그런 다음 캔버스에 이미지 내용을 그릴 수있는 HTML5 drawImage 방법을 사용하여. 코드는 다음과 같아야합니다

var canvas = document.getElementById('canvas') // reference to canvas element 
var ctx = canvas.getContext('2d'); // get the canvas context; 
ctx.drawImage(img, 0, 0); //draw image into canvas; 

Answer 2

당신이 더 나을 것 (에 의해 원래의 대답을 통해 easimov), 이미지가 처음로드 될 때까지 대기한다. 이미지가로드되지 않은 경우 이미지가 캔버스에 그려지지 않습니다. img가 이미지 태그라고 가정합니다.

var canvas = document.getElementById('canvas') // reference to canvas element 
var ctx = canvas.getContext('2d'); // get the canvas context; 

img.onload = function() 
{ 
    ctx.drawImage(img, 0, 0); //draw image into canvas; 
}