이미지를 읽어와서 캔버스에 그림을 그려야 할 때가 있죠. Javascript Canvas 이미지 그리기 방법을 살펴보겠습니다.
목차
Javascript Canvas 이미지 그리기 방법(crop, slicing)
canvas에 이미지를 그리는 방법은 canvas의 context를 가져와서 drawImage() 메서드를 이용하면 됩니다. 이미지의 특정 부분만 canvas에 그리는 방법 역시 drawImage() 메서드를 이용하는 방법인데 전달해야 하는 파라미터의 개수에 차이가 있습니다. 우선 코드부터 살펴보시죠.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스에 그리기</title>
<script>
function drawImageToCanvas() {
var image = document.getElementById("image");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 10, 10, 100, 200, 50, 50, 200, 400);
}
window.onload = function() {
drawImageToCanvas();
};
</script>
</head>
<body>
<img id="image" src="captured.png">
<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
</body>
</html>아래 그림은 위의 코드를 실행하고 캡쳐한 결과입니다. 왼쪽은 img 태그로 표현한 이미지이며 오른쪽의 빨간 박스는 canvas 영역입니다. 왼쪽 이미지의 빨간색 영역 (10, 10)부터 100×200 크기의 영역을 우측 캔버스 (50, 50)부터 200×400의 크기로 그린 것입니다.
drawImage() 메서드에는 총 9개의 파라미터가 들어갔습니다. MDN의 도큐먼트에는 다음과 같이 drawImage() 메서드의 사용법에 대해 안내하고 있습니다.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)각 파라미터의 값의 의미는 아래와 같은데, s로 시작하는 것은 원본(source)를 의미하며, d로 시작하는 것은 대상(destination)을 의미합니다. 즉, 원본은 파라미터로 넘겨주는 image 객체를 의미하며, 대상은 canvas의 context를 의미합니다.
- image: 이미지 객체를 의미합니다.
- sx: 원본의 시작점 좌측 상단 x좌표
- xy: 원본의 시작점 좌측 상단 y좌표
- sWidth: 원본에서 가져올 이미지의 폭
- sHeight: 원본에서 가져올 이미지의 높이
- dx: 캔버스에서 그릴 시작점 x좌표
- dy: 캔버스에서 그릴 시작점 y좌표
- dWidth: 캔버스에서 그릴 이미지의 폭
- dHeight: 캔버스에서 그릴 이미지의 높이
위와 같은 방식으로 이미지를 crop 해서 캔버스에 그릴 수 있습니다. MDN에서 제공하는 아래의 이미지를 보면 보다 쉽게 이해할 수 있습니다.
원본 이미지의 일부만 이용하는 것이 아니라 전체 이미지를 canvas에 그리고 싶다면, 굳이 파라미터를 9개까지 사용할 필요가 없습니다. 이 방법에 대해서는 Javascript Canvas 이미지 그리기 방법 2: 확대, 축소를 참고하시면 됩니다. 그리고 확대나 축소도 필요없고 그냥 Canvas에 단순히 원본 이미지를 그대로 그리기만 하면 된다면, Javascript Canvas 이미지 그리기 방법 1: copy를 참고하시면 됩니다.
관련 자료
MDN의 CanvasRenderingContext2D: drawImage() 메서드 문서를 참고했습니다.