AIで「主役」を際立たせる：背景エフェクトの技術解剖

1. Composite Operation による非破壊クリッピング

AIが生成した人物のマスクデータ（2値画像）を使って、元の画像から人物だけを抜き出す処理。これをピクセル単位のループで行うとJSの負荷が大きくなりますが、本ツールではCanvasの合成モード（Composite Operation）を利用してGPU側で処理しています。

source-in を利用することで、「先に描画したマスク画像」が不透明な部分にのみ「後から描画した元画像」を表示させることができます。これにより、髪の毛のような複雑な境界線も高速かつ滑らかに抽出可能です。

// Canvasの合成機能を利用した高速切り抜き
function cutoutPerson(fgCtx, maskCanvas, originalImg) {
    fgCtx.clearRect(0, 0, width, height);
    
    // 1. まずマスク（抜き型）を描画
    fgCtx.globalCompositeOperation = 'source-over';
    fgCtx.drawImage(maskCanvas, 0, 0);
    
    // 2. 合成モードを切り替えて元画像を流し込む
    fgCtx.globalCompositeOperation = 'source-in';
    fgCtx.drawImage(originalImg, 0, 0);
    
    // モードを戻す
    fgCtx.globalCompositeOperation = 'source-over';
}

2. スパイラル・オフセット法による「軽量ぼかし」

Canvas標準のぼかしフィルタは環境によって重くなることがあるため、背景のぼかしには独自の「多重オフセット描画」を採用しました。

画像を一旦1/5程度に縮小して描画負荷を下げた後、黄金角に基づく回転式を用いて、少しずつ位置をずらしながら数十回重ね描きします。これにより、単純なガウスぼかしよりもアーティスティックで、かつ低スペックな端末でもサクサク動く「擬似ボケ」を実現しています。

// 独自の計算式を用いた多重オフセットによる背景ぼかし
function renderFakeBlur(bgCtx, smallCanvas, intensity) {
    const iterations = // 描画負荷を考慮したループ回数;
    const maxRadius = intensity * // チューニングされた係数;
    
    bgCtx.globalAlpha = // 重ね合わせ用の透過度計算;
    
    for (let i = 0; i < iterations; i++) {
        // ここに黄金角に基づく座標分散の計算処理が入ります
        const offX = Math.cos(angle) * r;
        const offY = Math.sin(angle) * r;
        
        bgCtx.drawImage(smallCanvas, offX, offY, targetW, targetH);
    }
}

3. 端末内完結（Edge AI）のパイプライン

プライバシー保護のため、画像の解析からエフェクト適用まで、すべての処理が「ユーザーの端末内」で実行されます。MediaPipeのモデルをWebAssembly経由で動作させ、メインスレッドをブロックしないよう `requestAnimationFrame` でレンダリングを制御。これにより、大きな写真でもブラウザがフリーズすることなく加工を楽しめる設計にしています。

Developer's Note

「SNS映え」する加工を、いかに手軽に、かつ安全に提供できるか。ここに最も心血を注ぎました。特に「ぼかし」の質感にはこだわり、単純な解像度低下ではなく、レンズのボケ味に近い広がり方をするようオフセットの計算式を微調整しています。

また、iPhoneなどのモバイル端末ではメモリ制限が厳しいため、1500pxという上限解像度を設けつつ、内部的にはオフスクリーンCanvasを再利用してメモリの確保と解放の回数を極限まで減らしています。この「見えない部分の最適化」が、Webツールとしての手軽さを支えています。