[HTML5] canvas를 이용한 Image Crop

 

 

HTML5의 canvas를 이용해서 이미지의 특정 부분을 Crop 한다.

이미지에 crop할 범위를 그리는 방법은 이전 게시물을 참고한다.

이미지를 Crop 알고리즘은 다음과 같다.

 

---

1. 이미지에서 x(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop x 좌표), y(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop y 좌표), width(Crop 범위 사각형의 width), height(Crop 범위 사각형의 Height)를 구한다.

2. Crop한 이미지를 그릴 after div에 canvas Element를 새로 만들어준다.

3. 1번의 정보를 이용해 after div canvas에 image를 그려준다.

---

※참고

canvas.getContext('2d').drawImage의 Syntax는 아래와 같다.