HTML Canvas를 사용하여 JavaScript에서 이미지 자르기
JavaScript에서 이미지를 자르기 위해 HTML canvas 요소를 사용할 수 있습니다. canvas 요소는 HTML5에서 사용할 수 있습니다. 캔버스에 이미지를 표시하고 자르기 위해 drawImage() 함수를 사용할 수 있습니다. drawImage() 함수는 최소 3개의 매개변수와 최대 9개의 매개변수를 사용합니다.
캔버스에 무엇이든 그릴 수 있는 컨텍스트라는 것이 있습니다. 캔버스 위에 그림을 그릴 수 있는 펜으로 생각할 수 있습니다. context는 화면에 내용을 그리는 drawImage()라는 메서드를 제공합니다. 이제 JavaScript에서 이미지를 자르는 단계별 프로세스를 살펴보겠습니다.
HTML5 canvas 요소를 사용하여 JavaScript에서 이미지 자르기
HTML 5의 canvas는 우리가 원하는 것을 그릴 수 있는 빈 영역에 불과합니다. HTML 코드 내부에 캔버스를 추가하려면 ID가 canvas인 canvas 태그를 사용할 수 있으며 이 캔버스 요소에 크기도 지정할 수 있습니다(이 경우 너비: 1000px 및 높이: 500px). 다음과 같이.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
body 태그 끝에 JavaScript 코드를 작성할 스크립트 파일을 연결했습니다.
JavaScript 내에서 cropImg() 라는 함수를 만들었습니다. 이 함수 내에서 document.getElementById()를 사용하여 HTML canvas 요소를 가져와 canvas 변수 안에 저장합니다. 2차원 이미지인 이 캔버스에 이미지를 그리고 싶기 때문에 먼저 getContext() 함수를 사용하여 캔버스 요소의 컨텍스트를 가져오고 이 함수에 대한 인수로 2d를 전달하겠습니다. 그리고 이 컨텍스트를 저장하기 위해 ctx라는 또 다른 변수를 만들었습니다.
getContext() 함수 및 해당 속성에 대해 알아보려면 MDN 문서를 방문하여 읽을 수 있습니다. 이 단계에서 이것이 우리 코드의 모습입니다.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
이제 캔버스가 설정되고 ctx 컨텍스트가 준비되었으므로 이미지 자르기 및 그리기를 시작할 수 있습니다.
이제 Image() 생성자를 사용하여 이미지 태그를 만들고 변수 image 안에 저장해 보겠습니다. 그런 다음 src 속성을 사용하여 이미지를 image에 연결할 수 있습니다. 이 자습서에서는 인터넷(Unsplash.com)에서 이미지의 URL을 가져온 다음 아래 표시된 문자열로 소스 속성에 추가합니다.
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
캔버스에서 이미지를 자르고 그리려면 이미지가 이미 완전히 로드되었는지 확인해야 합니다. 이를 위해 이미지에서 onload 기능을 사용할 수 있습니다. 이 함수 안에 작성된 코드는 이미지가 완전히 로드된 후에만 실행됩니다.
이 기사에서 이전에 보았듯이 context는 캔버스에 이미지를 그리기 위한 drawImage()라는 함수를 제공합니다. 최종 이미지가 어떻게 보이길 원하는지에 따라 이 함수에 일부 입력을 전달해야 합니다. 이미지를 자르고 싶기 때문에 브라우저에 해당 이미지의 특정 부분만 표시하고 나머지 부분은 제외하려면 drawImage() 함수에 9개의 매개변수를 전달해야 합니다. 그리고 매개변수는 다음과 같습니다.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
매개변수:
image- 브라우저에서 자르고 표시하려는 이미지 자체입니다.sx(소스 이미지 x축) - 이 매개변수는 x축에서 이미지를 자르거나 자르기를 시작할 위치를 나타냅니다.sy(소스 이미지 y축) - 이 매개변수는 y축에서 이미지를 자르거나 자르기를 시작할 위치를 알려줍니다.sWidth- sx에서 시작하는 이미지의 너비입니다.sHeight- sy에서 시작하는 이미지의 높이입니다.dx- x축에서 화면에 이미지를 그리기 시작하는 지점입니다.dy- y축에서 화면에 이미지를 그리기 시작하는 지점입니다.dWidth- 화면에 표시되어야 하는 이미지의 길이입니다.dHeight- 화면에 표시되어야 하는 이미지의 높이.
아래 이미지는 이미지를 자르거나 자르는 데 사용되는 sx, sy 및 sWidth 매개변수를 보여줍니다.
이미지를 자른 후 브라우저 창에 표시하기 위해 dx, dy, dWidth 및 dHeight 매개변수를 사용합니다.
이제 이미지를 표시할 방법과 위치에 따라 이 함수에 매개변수를 전달할 수 있습니다. 이 예에서 우리는 image, 150, 200, 500, 300, 60,60, 500, 300 이 9가지 값을 drawImage() 함수에 전달했습니다. 원하는 출력에 따라 이 값을 조정할 수 있습니다. 결국 코드는 다음과 같이 보일 것입니다. 코드 내에서 cropImg() 함수를 호출하는 것을 잊지 마십시오.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
image.onload = function() {
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);
}
}
cropImg();
이것은 HTML 5 캔버스 요소를 사용하여 JavaScript에서 이미지를 자르는 전체 절차입니다. 이것은 JavaScript에서 이미지를 자를 때 가장 널리 사용되는 접근 방식입니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn