[그래픽 처리] 그림 파일 렌더링/drawImage()

[그래픽 처리] 그림 파일 렌더링/drawImage()

캔버스는 JPEG나 PNG와 같은 그림 파일을 읽어 들여 랜더링하는 기능 및 크기 변경, 잘라내기 등 세세한 조작을 할 수 있습니다.

1) 그림 파일 읽어 들이기

그림 파일을 밁어 들이려면 우선 이미지 객체를 작성하고 이미지 객체의 src 속성에 URL을 지정하면 됩니다. 
읽어 들이기 후 onload 이벤트가 발생합니다.

var image = new Image();
image.src = "그림파일의 URL"
image.onload = function(){/* 그림 파일을 읽어 들였을 때 실행할 처리 */};

2) 캔버스에 그림 파일 렌더링

drawImage() 메서드를 이용해 그림 파일을 포함하고 있는 이미지 객체를 캔버스 위에 렌더링합니다.

(1) 읽어 들인 그림 파일 그대로 좌표 (dx, dy)에 렌더링 
context.drawImage(image, dx, dy)

(2) 크기를 변경하여 렌더링 
너버(dw) * 높이(dh) 만큼 그림 파일의 크기를 변경하여 렌더링 합니다.
context.drawImage(image, dx, dy, dw, dh)

(3) 잘라내서 렌더링
원래 그림의 좌표 (sx, sy)에서 너비*높이(sw * sx) 만큼을 잘라내어 좌표 (dx, dy)에 너비*높이(dw * dx) 크기로 렌더링 합니다.
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

이 예제에서 주의 할 점은 HTML 파일과 같은 폴더에 sample.jpg 파일을 저장해야 한다는 것입니다.

이번엔 좌표 설정을 통해 이미지의 원하는 부위를 잘라내기 하여 나타내보았습니다.
잘라낼 부분과 렌더링 할 부분을 잘 지정해 주세요. 

sample.jpg 이미지의 일부분이 잘라서 나타나는 것을 확인하실 수 있습니다.