Javascript Canvas 이미지 그리기 방법 2: 확대, 축소

by

캔버스에 이미지를 그릴 때 확대나 축소해야 하는 경우가 있죠? Javascript Canvas 이미지 그리기 방법 중 확대, 축소 기능을 살펴보겠습니다.

Javascript 이미지 그리기 확대, 축소 방법

이미지 객체를 가져와서 확대, 또는 축소해서 canvas에 그리는 방법을 다음 코드로 살펴보겠습니다. 사용한 방법은 라인 11, 12에 있는 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, 20, 20, 200, 100);
      ctx.drawImage(image, 20, 140, 500, 500);
    }

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

위의 코드를 실행한 결과는 아래와 같습니다. 왼쪽에는 img 태그를 이용한 이미지 원본이 나와 있으며, 오른쪽 빨간 상자는 캔버스 입니다. 캔버스의 상단에는 원본 이미지를 축소해서 그린 것이 있으며, 하단에는 원본 이미지를 확대해서 그린 부분이 있습니다.

그림 1. Javascript Canvas 이미지 그리기: 확대, 축소
그림 1. Javascript Canvas 이미지 그리기: 확대, 축소

MDN의 drawImage() 메서드 문서에서는 사용법을 아래와 같이 안내하고 있습니다.

drawImage(image, dx, dy, dWidth, dHeight)

각 파라미터에 대해 설명해 드리겠습니다. d로 시작하는 파라미터들은 대상물, 목적지를 의미하는 destination을 말합니다. 여기에서 destination은 캔버스를 의미합니다.

  • image: 원본 이미지 객체를 의미합니다.
  • dx: 캔버스에 이미지를 그릴 좌표 x
  • dy: 캔버스에 이미지를 그릴 좌표 y
  • dWidth: 캔버스 내에 그려지는 이미지의 폭
  • dHeight: 캔버스 내에 그려지는 이미지의 높이

확대나 축소를 하지 않고 이미지를 그대로 복사만 한다면 굳이 파라미터를 5개나 사용할 필요가 없습니다. 이 방법에 대해서는 Javascript Canvas 이미지 그리기 방법 1: copy를 참고하시면 됩니다.

관련 자료

MDN의 CanvasRenderingContext2D: drawImage() 메서드 문서를 참고했습니다.

같이 읽으면 좋은 글

Leave a Comment