JavaScript에서 HTML Canvas를 사용하여 이미지 크기 조정

그래픽은 모든 웹 애플리케이션의 중요한 부분인 이미지의 측면을 설명하는 데 사용됩니다. HTML은 그래픽을 만드는 두 가지 방법을 제공합니다. 첫 번째는 canvas이고 다른 하나는 SVG입니다. 오늘 기사에서는 그래픽을 만드는 방법, 특히 캔버스와 JavaScript를 사용하여 HTML로 그림을 그리는 방법을 배웁니다.

JavaScript를 사용하여 HTML에서 canvas로 이미지 크기 조정

Canvas는 웹 애플리케이션에서 그래픽을 그리는 데 사용되는 표준 HTML 요소입니다. 테두리나 내용이 없는 페이지의 직사각형 영역에 불과합니다. 사용자는 이 직사각형 영역을 사용하여 그래픽을 그릴 수 있습니다.

캔버스에 렌더링되는 그래픽은 일반 HTML 및 CSS 스타일과 다릅니다. 포함된 모든 그래픽이 있는 전체 캔버스는 단일 DOM 요소로 처리됩니다.

HTML의 canvas 메소드

1. getContext(): contextType에 따라 캔버스에 그리기 컨텍스트를 반환하는 canvas에서 제공하는 내장 메서드입니다. 컨텍스트 식별자가 지원되지 않거나 이미 구성된 경우 null이 반환됩니다. 지원되는 컨텍스트 유형은 2d, webgl, webgl2 및 bitmaprenderer입니다.
2. drawImage(): 캔버스에 이미지를 다양한 방식으로 그릴 수 있도록 도와주는 canvas에서 제공하는 내장 메소드입니다.

drawImage()의 구문

context.drawImage(
    $image, $sx, $sy, $sWidth, $sHeight, $dx, $dy, $dWidth, $dHeight);

매개변수

• $image: 캔버스에 그려야 하는 이미지 소스를 지정하는 필수 파라미터입니다. 이미지 소스는 CSSImageValue, HTMLImageElement, SVGImageElement 등과 ​​같을 수 있습니다.
• $sx: 소스 이미지의 X 또는 수평 좌표를 지정하는 선택적 매개변수입니다. 대상 이미지에 그리기 위해 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $sy: 소스 이미지의 Y 또는 수직 좌표를 지정하는 선택적 매개변수입니다. 대상 이미지에 그리기 위해 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $sWidth: 소스 이미지의 너비를 지정하는 선택적 매개변수입니다. 대상 이미지에 그리기 위해 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $sHeight: 소스 이미지의 높이를 지정하는 선택적 매개변수입니다. 대상 이미지에 그리기 위해 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $dx: 대상 이미지의 X 또는 수평 좌표를 지정하는 필수 매개변수입니다. 소스 이미지가 배치된 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $dy: 대상 이미지의 Y 또는 수직 좌표를 지정하는 필수 매개변수입니다. 소스 이미지가 배치된 왼쪽 상단 모서리에서 직사각형으로 측정됩니다.
• $dWidth: 대상 이미지의 너비를 지정하는 선택적 매개변수입니다. 왼쪽 상단 모서리에서 직사각형으로 측정됩니다. 값을 지정하지 않으면 기본 너비는 소스 이미지의 너비입니다.
• $dHeight: 대상 이미지의 높이를 지정하는 선택적 매개변수입니다. 왼쪽 상단 모서리에서 직사각형으로 측정됩니다. 지정하지 않으면 기본 높이는 소스 이미지의 높이입니다.

JavaScript Canvas를 사용하여 이미지 크기를 조정하는 단계

예제 코드:

<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2" width="500" height="400">
<canvas id="canvas" width=1000></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src =
    'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2';

img.onload = function() {
  // set height proportional to destination image
  canvas.height = canvas.width * (img.height / img.width);
  // step 1 - resize to 75%
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  // Set the width & height to 75% of image
  oc.width = img.width * 0.75;
  oc.height = img.height * 0.75;
  // step 2, resize to temporary size
  octx.drawImage(img, 0, 0, oc.width, oc.height);
  // step 3, resize to final size
  ctx.drawImage(
      oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width,
      canvas.height);
}

출력: