이 프로젝트에 대해

이미지를 업로드하고 원하는 색상 수를 선택하면 도구가 자동으로 영역의 윤곽선을 그리고, 번호를 매기고, 인쇄할 수 있는 깔끔한 SVG 파일을 준비합니다. 내 사진으로 맞춤 DIY 페인트 바이 넘버스 키트를 만드는 무료이고 빠른 방법입니다.

이 프로젝트는 오픈소스 PBNCanvas의 작업에서 영감을 받아 최신 웹 기술 — 바닐라 JavaScript, HTML canvas API, SVG — 로 다시 구축했습니다. 의존성 없이, 이미지를 추적하지 않고, 서버 처리 없이 빠르고 직관적이며 완전히 클라이언트 사이드인 경험을 제공합니다.

작동 원리

1. 미디안 컷 색상 축소로 색상을 선택한 팔레트 크기로 양자화하고, CIELAB 색상 공간에서 인지 기반 매칭을 수행합니다.
2. 플러드 필로 연결된 영역(패싯)을 감지하고, 작은 영역은 가독성을 위해 인접 영역과 병합합니다.
3. 매끄러운 벡터 윤곽선을 생성하고 각 영역에서 가장 넓은 지점에 번호 라벨을 배치합니다.
4. 최종 SVG는 어떤 크기로도 다운로드하거나 인쇄할 수 있습니다 — 색칠, 윤곽선, 라벨, 색상 팔레트 참조 시트는 선택 사항입니다.

기술 한눈에 보기

• 미디안 컷 양자화 — 수백만 가지 색상을 4–48개의 대표 색상 팔레트로 축소.
• CIELAB 색상 거리 — 사람의 눈이 색상 차이를 인지하는 방식으로 픽셀을 팔레트 색상에 매칭.
• 플러드 필 영역 감지 — 같은 색상의 픽셀을 칠할 수 있는 패싯으로 그룹화.

모든 것이 브라우저에서 로컬로 실행됩니다 — 이미지는 어떤 서버에도 업로드되지 않습니다. 자세한 내용은 개인정보처리방침을 확인하세요.