このプロジェクトについて

画像をアップロードして色数を選ぶだけで、ツールが自動的に領域の輪郭を描き、番号を付け、印刷可能なクリーンなSVGファイルを準備します。自分の写真からカスタムDIYペイント・バイ・ナンバーキットを作る、無料で速い方法です。

本プロジェクトはオープンソースの PBNCanvas の活動に着想を得て、モダンなウェブ技術 — バニラJavaScript、HTML canvas API、SVG — で再構築しました。依存関係なし、画像の追跡なし、サーバー処理なしの、高速で直感的、完全にクライアントサイドな体験を提供します。

仕組み

1. メジアンカット色削減で色を選択したパレットサイズに量子化し、CIELAB色空間で知覚的なマッチングを行います。
2. フラッドフィルで連結領域（ファセット）を検出し、小さいものは隣接領域に結合して見やすくします。
3. 滑らかなベクター輪郭を生成し、各領域内で最も広い位置に番号ラベルを配置します。
4. 最終SVGはどのサイズでもダウンロードまたは印刷可能 — 塗り、輪郭、ラベル、カラーパレット参照シートは選択式です。

技術の概要

• メジアンカット量子化 — 数百万色を4〜48色の代表パレットに削減。
• CIELAB色距離 — 人間の目が色差を知覚する方式でピクセルをパレット色にマッチング。
• フラッドフィル領域検出 — 同じ色のピクセルを塗れるファセットにグループ化。

すべてお使いのブラウザ内でローカルに動作します — 画像がサーバーにアップロードされることはありません。詳しくはプライバシーポリシーをご覧ください。