이미지 그리드 분할

이미지 그리드 분할은 하나의 이미지를 3×3 9등분으로 자르는 도구입니다. 잘라낸 이미지를 Instagram이나 WeChat 등에 순서대로 게시하면 원본 이미지가 복원되어 독특한 시각 효과를 만들어냅니다. 모든 이미지 처리는 브라우저에서 로컬로 이루어지며 개인정보를 보호합니다. 게시하거나 제출하기 전에는 출력 파일을 열어 가독성, 잘림, 해상도, 순서, 누락된 내용이 없는지 확인해야 합니다.

이미지 그리드 분할기는 HTML5 Canvas 2D API(WHATWG HTML Living Standard §4.12, 원래 2014년 W3C HTML5 권고안에서 지정)를 기반으로 구축됩니다. 파이프라인은 세 가지 레이어로 구성됩니다. 소스 픽셀을 CanvasImageSource로 디코딩하고, drawImage의 9인수 형태를 통해 해당 픽셀의 하위 사각형을 오프스크린 캔버스에 복사한 뒤, canvas.toBlob()을 통해 오프스크린 캔버스를 PNG로 인코딩합니다. 모든 처리는 브라우저 탭에서 이루어지며 업로드, 서버, 원격 렌더링이 없습니다. 디코딩 단계는 생각보다 더 중요합니다. <input type='file'> 또는 드래그 앤 드롭 DataTransferItem의 File은 FileReader.readAsDataURL(또는 현대 코드에서는 URL.createObjectURL)에 의해 Blob URL로 읽히며, 브라우저는 이를 Image 로더에 전달합니다. Image 요소는 플랫폼의 이미지 코덱(Chromium에서는 libpng/libjpeg-turbo/libwebp, WebKit/Gecko에서는 등가물)에 의해 비트맵이 디코딩되면 'load'를 트리거합니다. 이 방식으로 로드된 비-CORS 이미지는 '테인티드'로 처리됩니다. getImageData가 SecurityError를 던지므로 분할기는 drawImage만 사용하고 픽셀 배열을 다시 읽지 않아 CORS 문제를 완전히 우회합니다. 매우 큰 이미지(긴 변 기준 ~8K 이상)의 경우 일부 엔진에서 비트맵이 GPU 메모리에 보관되므로 canvas.toBlob이 GPU→CPU 읽기를 거쳐 휴대폰에서 ~30-100ms가 소요될 수 있습니다. 크롭은 슬라이스당 단일 drawImage 호출입니다: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) — 처음 세 쌍은 소스 사각형(sx, sy, sw, sh)이고 다음 세 쌍은 대상 캔버스의 대상 사각형입니다. 1920×1080 사진의 3×3 분할에서 각 슬라이스의 소스 사각형은 (col*640, row*360)에서 시작하는 640×360입니다. 대상 캔버스는 슬라이스 크기(640×360)로 정확히 설정된 뒤 canvas.toBlob(blob => ..., 'image/png')가 플랫폼 PNG 인코더를 실행합니다. 그리드 슬라이스는 날카로운 텍스트와 UI 요소가 있는 깨끗한 직사각형 크롭이므로 JPEG의 8×8 DCT 블록이 가장자리를 번지게 하는 PNG를 JPEG보다 선택합니다. 일괄 다운로드는 각 Blob에 URL.createObjectURL, <a download> 합성 클릭, 그리고 짧은 지연(보통 60-120초, 사용되지 않는 Blob URL의 플랫폼 수명) 후 revokeObjectURL을 사용합니다. 9개 슬라이스의 경우 9개의 다운로드 이벤트가 연속으로 발생합니다. 일부 브라우저는 동일 탭에서 여러 다운로드를 제한하므로 페이지는 보통 클릭 사이에 50-200ms의 setTimeout으로 간격을 둡니다. 성능 면에서 휴대폰의 병목은 drawImage가 아닌 보통 PNG 인코더(libpng는 인코딩당 단일 스레드)입니다. 9개의 1080p 슬라이스에서 중급 Android는 총 200-500ms, 데스크톱 Chromium은 100-200ms를 예상합니다.

• 파이프라인: FileReader 또는 URL.createObjectURL → Image 요소 → HTMLCanvasElement → drawImage 9인수 크롭 → canvas.toBlob('image/png') → URL.createObjectURL + <a download>.
• drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)는 소스 사각형(sx,sy,sw,sh)을 대상 사각형(dx,dy,dw,dh)으로 크롭하는 9인수 오버로드입니다. 이것이 분할을 수행하는 단일 API 호출입니다.
• CORS 헤더가 제공되지 않는 소스 이미지는 캔버스를 테인티드합니다. getImageData가 SecurityError를 던지므로 분할기는 픽셀 배열을 읽지 않고 블리트와 인코딩만 수행합니다.
• canvas.toBlob은 비동기적이고 비차단(나중의 마이크로태스크에서 콜백 발생)인 반면, 레거시 canvas.toDataURL은 동기적이고 큰 이미지에서 메인 스레드를 동결합니다.
• N×M 이미지의 3×3 분할에서 각 슬라이스는 (N/3) × (M/3)입니다. 나누어 떨어지지 않는 크기는 오른쪽/아래 가장자리에 1픽셀 나머지를 생성하며, 필요시 명시적 나머지 슬라이스와 함께 Math.floor로 처리됩니다.
• 그리드 슬라이스에 JPEG보다 PNG를 선택하는 이유는 각 슬라이스가 8×8 DCT 블록이 경계선을 번지게 하는 날카로운 가장자리(텍스트, UI, 다이어그램)가 있는 직사각형 크롭이기 때문입니다.
• 일괄 다운로드는 Blob당 URL.createObjectURL + <a download> 클릭을 사용합니다. 브라우저는 동일 탭의 여러 다운로드를 제한하므로 페이지는 보통 클릭 간 50-200ms 간격을 두고 메모리 해제를 위해 클릭 후 Blob URL을 해제합니다.
• 성능 병목은 drawImage가 아닌 플랫폼 PNG 인코더(libpng는 인코딩당 단일 스레드)입니다. 9개의 1080p 슬라이스는 중급 모바일에서 ~200-500ms, 데스크톱 Chromium에서 ~100-200ms가 소요됩니다.