html5 Canvas2 [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. [HTML5] canvas에 마우스로 사각형 그리기 마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다. mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고, mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고, mouseup시에는 마우스 클릭상태를 off로 변경한다. 2021. 2. 26. 이전 1 다음 반응형
