이미지 자르기 도구

자르기는 이미지에서 사각형 영역을 잘라내고 그 바깥을 모두 버리는 작업입니다. 픽셀을 재샘플링하지 않고도 구도를 바꿀 수 있다는 점에서 가장 오래된 편집 동작 중 하나입니다—4000×3000 사진에서 1000×800 영역을 잘라내면 그 안의 원본 픽셀은 단 하나도 손상되지 않습니다. 이 페이지는 데스크톱 편집기와 똑같은 방식으로 자르기를 제공합니다:미리보기 위에서 선택 영역을 드래그하고, X/Y/W/H 입력란에 정확한 숫자를 입력하고, 고정된 캔버스(아바타, 배너, 증명사진 등)에 맞춰야 할 때는 비율을 잠그고, 마지막으로 PNG/JPEG/WebP로 내보냅니다. 회전과 반전은 자르기 이후에 적용되므로, 저장된 파일은 이미 원하는 방향을 그대로 갖게 됩니다—이 점은 인쇄용이나 EXIF 방향 태그를 무시하는 앱에서 중요합니다. 모든 처리는 Canvas를 통해 브라우저 안에서 끝납니다—이미지 바이트는 페이지를 떠나지 않으므로 개인 문서와 사진이 사용자의 기기에 그대로 남습니다.

자르기는 논리적으로는 단순합니다—사각형 하나를 고르고, 그 안의 픽셀을 복사하고, 나머지는 버립니다—하지만 브라우저에서 이를 제대로 구현하려면 몇 가지 톱니바퀴가 맞물려야 합니다:화면의 미리보기는 원본의 축소판이고, 드래그 핸들은 표시 좌표에서 움직이며, 실제 자르기는 화질 손실을 막기 위해 원본 좌표에서 일어나야 합니다. 파일이 로드되면 도구는 먼저 URL.createObjectURL()로 blob URL을 얻고, HTMLImageElement에 넘겨 디코딩합니다(제로 카피이며 base64 data URL보다 훨씬 적은 메모리 사용). img.naturalWidth와 naturalHeight가 표준 좌표계가 됩니다—state에 보관되는 모든 X/Y/W/H는 이 픽셀을 단위로 표현됩니다. 미리보기 <img>는 max-width/max-height로 브라우저가 알아서 축소해 그리도록 하고, 로드와 resize가 일어날 때마다 getBoundingClientRect()로 실제 렌더 폭을 잰 뒤 displayScale 비율(렌더 폭/원본 폭)을 저장해 둡니다. 드래그 도중 마우스 이동량을 이 비율로 나누면 화면상의 움직임이 원본 픽셀 단위로 환산되며, 화면에서 얼마나 축소되어 보이든 자르기 사각형이 정확하게 유지됩니다. 자르기 박스 자체는 이미지 위에 절대 위치로 겹쳐진 <div>입니다. 8개의 크기 조절 핸들(네 모서리 + 네 변)은 각각 pointerdown에서 모드('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'move')를 발생시킵니다. window 레벨의 pointermove 리스너(pointer events는 마우스와 터치를 모두 지원)는 현재 마우스 위치를 읽고 드래그 시작점과의 차이를 구한 뒤 원본 픽셀로 변환해 사각형의 left/top/right/bottom을 다시 계산합니다. 모서리 드래그는 반대 모서리를 고정점으로 삼고, 변 드래그는 수직인 중앙축을 고정하며, 비율 잠금 상태에서는 주축을 먼저 정한 뒤 나머지를 유도합니다. 매 결과는 이미지 경계 안으로, 최소 변 10 px로 클램프되어 사각형이 뒤집히거나 캔버스 밖으로 빠져나가지 않습니다. 내보내기 단계에서는 두 개의 오프스크린 canvas를 사용합니다. 첫 번째 canvas는 자르기 영역의 원본 크기에 맞춰 만들어집니다. ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh)의 9-인자 형식을 써서 자르기 영역 픽셀만 끌어옵니다—Chromium과 Firefox 모두 이 작업을 GPU 텍스처 복사로 처리하므로, 출력 크기가 그대로라면 재샘플링이 일어나지 않습니다. 회전이나 반전이 필요하면 두 번째 canvas를 회전 후 크기(90°/270°에서는 가로세로 교환)로 생성하고, context를 중심으로 평행 이동한 다음 ctx.rotate(angle)과 ctx.scale(±1, ±1)로 변환을 적용한 뒤, 자른 canvas를 (-w/2, -h/2) 위치에 그립니다. 마지막으로 canvas.toBlob(mimeType, quality)이 인코딩된 바이트를 Blob으로 돌려주고, URL.createObjectURL()이 이를 다운로드 가능한 URL로 만들어 줍니다. quality는 PNG(무손실)에서는 무시되고, JPEG와 WebP에서는 인코더에 대한 힌트(0–1)로 쓰입니다. 새 자르기 결과가 나오면 이전 Blob URL은 revokeObjectURL로 해제해 디코딩된 픽셀 데이터가 메모리에 계속 남지 않도록 합니다.

• 자르기 좌표(X/Y/W/H)는 원본 이미지 픽셀 기준입니다.
• 모든 처리는 브라우저 내 Canvas API로 실행됩니다.
• 자르기 상자는 절대 위치된 div로 8개의 드래그 핸들을 가집니다.
• 내보내기는 오프스크린 Canvas와 drawImage 9인수 형식을 사용합니다.
• 상태 전환마다 이전 Blob URL을 명시적으로 해제합니다.