AI手形抽出：21点の座標から「温かみのあるスタンプ」を生成する技法

1. ランドマーク補間による「ふっくら」シルエット生成

MediaPipe Hand Landmarkerが返す21点の座標はあくまで「点」です。これをそのまま繋いでも線画にしかなりません。本ツールでは、手首と各指の付け根を結ぶ特定のインデックスを用いて「手のひら」のポリゴンを動的に生成しています。

さらに、Canvasの lineCap="round" と lineWidth を組み合わせた「ストローク・フィル」手法を適用。座標間の距離に基づいた独自の太さ設定を行うことで、赤ちゃん特有の「ふっくらとした指の質感」を数学的に再現しています。

// 骨格データから手のひらと指のシルエットを再構成するロジック
function renderHandSilhouete(ctx, landmarks, thickness) {
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.lineWidth = thickness; // ユーザー設定の太さ

    // 1. 手のひら（Palm）領域を形成
    ctx.beginPath();
    // 独自のパス形成アルゴリズム
    // ここに特定のランドマーク（手首〜指の付け根）を結ぶ計算処理が入ります
    ctx.closePath();
    ctx.fill();
    ctx.stroke(); // 輪郭を太らせて「丸み」を強調

    // 2. 各指（Fingers）の描画
    FINGER_MAP.forEach(fingerIndices => {
        ctx.beginPath();
        // 指の関節座標を滑らかに補間して描画
        // ここに〇〇のパス生成処理が入ります
        ctx.stroke();
    });
}

2. iOS Safariのフリーズを回避する「ピクセルノイズ・ハック」

スタンプらしい「インクのかすれ」を表現する場合、通常はSVGフィルタやCanvasの filter プロパティを使用します。しかし、高解像度画像に対してこれらの処理を行うと、iOS Safari等のモバイル環境で描画がフリーズしたり、クラッシュしたりする深刻なバグに遭遇します。

この問題を解決するため、本ツールでは getImageData で取得した生ピクセルデータに対し、直接アルファチャンネルを操作する軽量なノイズアルゴリズムを実装しました。ランダムな透過処理を全ピクセルに適用することで、GPU負荷をほぼゼロに抑えつつ、決定論的なスタンプ質感を全デバイスで安定して再現しています。

// 高速なインクかすれエフェクトの実装
function applyStampNoise(offCtx, width, height, noiseIntensity) {
    const imgData = offCtx.getImageData(0, 0, width, height);
    const data = imgData.data;
    const probability = // 独自のチューニング値に基づく確率計算

    for (let i = 0; i < data.length; i += 4) {
        // 色が存在するピクセル（Alpha > 0）のみを対象に
        if (data[i + 3] > 0) {
            // ランダムにAlpha値を書き換え
            if (Math.random() < probability) {
                // 完全に透過させるか、減衰させる計算処理
                data[i + 3] = // ここに〇〇の計算処理が入ります
            }
        }
    }
    offCtx.putImageData(imgData, 0, 0);
}

3. ブラウザ完結型 HEIC / WebAssembly 処理系

iPhoneで撮影された写真の多くは HEIC 形式です。ブラウザ標準では扱えないこの形式をサポートするため、本ツールでは `heic2any` を動的インポートし、クライアントサイドで JPEG へ変換しています。

すべての処理は WebAssembly (WASM) 経由で実行される AI エンジンによって行われるため、サーバーとの通信は一切発生しません。プライバシーとパフォーマンスを極限まで両立させるための選択です。

Developer's Note

赤ちゃんの「パー」の手を撮影するのは、実は親御さんにとって一苦労ですよね。開発当初は「グー」の手でも認識させようと試みましたが、やはりスタンプとしての美しさを追求すると「パー」が最適という結論に至りました。

実装上のこだわりは、インク色の再現性です。単に色を塗るのではなく、背景色とのコントラストを常に計算し、透過 PNG で保存した際にも美しく見えるよう、Canvas の内部合成（ globalCompositeOperation ）を細かく制御しています。お子様の「今」という一瞬を、デジタルの手形で素敵に残していただければ幸いです。