마우스 Drag 이벤트1 [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').drawImag.. 2021. 2. 27. 이전 1 다음 반응형
