[javascript] Canvas 이미지 자르기

JavaScript에서 이미지를 자르기 위해 canvas를 사용하는 방법이 있다.

 

html cavas 요소를 가져와서 쓸 수도 있고  document.createElement("canvas")로 새로 생성하여 할 수 있다.

2차원 이미지인 이 캔버스에 이미지를 그리기 위해서는 getContext("2d") 메서드를 사용한다.

let canvas = document.createElement("canvas");  // document.getElementById('canvas');
const ctx = canvas.getContext("2d");

 

이제 캔버스가 설정되고 컨텍스트가 준비되어 이미지 자르기 및 그리기를 할 수 있게 된다.

 

Image() 생성자를 사용하여 이미지 태그를 만들고 사용할 이미지 링크를 속성에 추가한다.

+

DOM을 Canvas로 그리는 방식으로 작동합니다.
따라서, 캔버스로 그려진 이미지가 캐싱되면 다운로드 시 CORS 이슈가 발생합니다.
해결 방법은 아래와 같이 html2canvas에 allowTaint, useCORS를 설정하고, img 태그의 src 값에 쿼리스트링 값을 주어 캐싱 처리를 막고 crossOrigin 설정을 해주어야 합니다.

const url = "https://cdn.pixabay.com/photo/2016/11/22/21/26/notebook-1850613_1280.jpg";
const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;

 

캔버스에 이미지를 자르고 그리려면 완전히 로드가 되어야 한다.

이를 위해 onload기능을 사용할 수 있는데 이 함수 안에 작성된 코드는 이미지 로드가 완료된 후에만 실행된다.

img.onload = function(e) {
  console.log(e); // 이미지가 완전히 로드된 이후에 실행됨
}

 

이제 준비는 완료되었다. 본격적으로 캔버스에 이미지를 그려봅시다!

 

캔버스에 이미지 그리기

context는 캔버스에 이미지를 그리기 위해 drawImage() 함수를 제공하고 있다.

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, sHeight

 

이미지를 자른 후 브라우저 창에 표시하기 위한 dx, dy, dWidth, dHeight

이제 이미지 자르는 전체 코드를 봅시다.

const url = "https://cdn.pixabay.com/photo/2016/11/22/21/26/notebook-1850613_1280.jpg";
const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;
img.onload = function() {
  ctx.drawImage(img, 150, 200, 700, 300, 100, 100, 700, 300);
}

 

drawImage까지 적용하고 나면 이렇게 됩니다.

이후 자른 이미지를 저장하려고 하면 toDataURL 메서드를 사용하여 이미지 링크를 받아서 사용하면 된다.

const dataURL = canvas.toDataURL("image/png");

 

---

참고 URL

https://www.w3schools.com/html/html5_canvas.asp

W3Schools.com