グリッド・サンプリングと
幾何学的な刺繍再現技術

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

写真を選び、ステッチのマス幅と糸の太さを指定します。

処理

各マスの中央1画素を読み、その色でX形の線を描きます。ほぼ白のマスは省きます。

出力

出力は 1000×1000px の JPEG（品質指定 0.85）です。

まず確認する点：中央1画素はマスの平均色ではありません。小さな模様が位置によって変わること、糸の太さで地が見えることを確認します。

仕上がりの例

写真をクロスステッチ風の質感に変えた例です。

画像を拡大

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料では運営者の愛猫の写真を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像

800×751px (JPEG)

記録の出力画像

1000×1000px (JPEG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	普通	—
ステッチの大きさ	15	初期値 15 ／ 範囲 5〜40
写真のズーム	100	初期値 100 ／ 範囲 50〜300

記録では「かわいい画像を生成！」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/image/cross-stitch/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、メモリ管理と画像処理（画素バッファ、縮小と容量予算）が参考になります。

1. 中心座標オフセットによるピクセルサンプリング

画像をクロスステッチ風にする際、単純な縮小・拡大（Nearest Neighbor）ではエッジが汚くなってしまうことがあります。本ツールでは、指定された「ステッチの大きさ（グリッド）」の中央付近から色情報を取得するサンプリング手法を採用しています。

メリット： グリッド全体を平均化するよりも、色と色の境界線が刺繍らしく「パキッ」と分かれます。また、背景の白い布地を活かすために、特定以上の輝度を持つピクセルを「無色」としてスキップするガードレールを設けています。

1マスの中に × を描く部分の例です。色と lineWidth は呼び出し前に設定します。

function stitch(ctx, x, y, size) {
  const p = size * 0.15;
  ctx.beginPath();
  ctx.moveTo(x + p, y + p);
  ctx.lineTo(x + size - p, y + size - p);
  ctx.moveTo(x + size - p, y + p);
  ctx.lineTo(x + p, y + size - p);
  ctx.stroke();
}

2. 幾何学的な「×」印（ステッチパス）の構築

刺繍の質感は、2本の糸が交差する瞬間に生まれます。本ツールでは、塗りつぶしの四角形を置くのではなく、Canvasの stroke を用いて2本の対角線を順次描画しています。

メリット： 3段階で選べる「糸の太さ」を lineWidth に反映させるだけで、繊細な刺繍から力強い刺繍まで表現が変化します。また、ステッチ同士の間にわずかな余白（パディング）を動的に計算して設けることで、糸の重なりと布の隙間をシミュレートしています。

3. モバイル端末向けの「MAX_SIZE」リサイズ・パイプライン

クロスステッチの描画は、グリッド数に比例して Canvas への stroke 命令数が激増します（例えば 100x100 のグリッドなら 2万回の線描画）。最新スマホの高解像度写真をそのまま処理すると、ブラウザの描画スレッドが飽和してクラッシュする恐れがあります。

メリット： 読み込み時にアスペクト比を維持したまま、実装上の上限解像度（長辺 1500px）へダウンサンプリングする工程を挟むことで、処理用の画像を小さくします。実際のステッチ描画は 1000×1000px の面で行い、目を細かくするほど描く線が増えます。

出力の仕様と確認する点

ステッチの大きさは 5〜40px。各マス中央の1画素から色を取り、RGB がすべて 245 を超える場合は描きません。平均色ではないため、小さい模様はマスの位置によって拾われたり消えたりします。

糸幅はマス幅の 15%・30%・45% の3段階で、最低 1px です。小さいマスほど描画数が増え、5px では約 4 万マスの処理になります。

出力は 1000×1000px の JPEG（品質指定 0.85）です。刺繍糸の色番号、必要な糸の長さ、実寸の図案を計算する機能はなく、写真を刺繍風に見せる画像加工です。