크롭도 Canvas API만으로 구현합니다. 핵심은 ctx.drawImage() 함수로, 인수를 잘 지정하면 원본 이미지의 특정 영역만 캔버스에 그릴 수 있습니다.
전체 형태는 ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)입니다. sx, sy는 원본 이미지에서 잘라낼 영역의 왼쪽 위 좌표, sw, sh는 그 영역의 너비와 높이입니다. dx, dy, dw, dh는 캔버스에 어디에 얼마나 크게 그릴지를 지정합니다. 쉽게 말하면 "원본에서 이 사각형 부분만 캔버스에 붙여넣기"하는 동작입니다.
드래그로 크롭 영역을 움직이면 그 좌표가 실시간으로 반영됩니다. "크롭 후 다운로드" 버튼을 누르면 그 값을 drawImage()에 그대로 전달하여 그린 뒤, PNG로 내보내어 다운로드합니다.
변환·다운로드까지 모든 처리가 브라우저 내에서 완결되며, 이미지가 서버로 전달되지 않습니다.