低レベルなピクセル操作で描く「シネマティック」と
高解像度処理を支える二重描画戦略

1. 「シネマティック」を定義する：色調補正を伴う反転アルゴリズム

通常のネガポジ反転は 255 - X という単純な計算で実現できます。しかし、これだけでは「本物のフィルム」のような空気感は出ません。

本ツールでは、反転後のRGB各チャンネルに対し、フィルム特有の「オレンジマスク」をシミュレートする独自の重み付けを適用しています。赤（R）の出力を抑え、青・シアン（B/C）を強調することで、ノスタルジックな質感を数学的に再現しました。

// フィルム風エフェクトのコアロジック概要
for (let i = 0; i < data.length; i += 4) {
    let r = data[i], g = data[i + 1], b = data[i + 2];
    
    // 単なる反転に加え、チャンネルごとに独自の係数でバイアスをかける
    data[i] = Math.min(255, (255 - r) * // 独自の赤み抑制係数 + // オフセット値);
    data[i + 1] = Math.min(255, (255 - g) * // 独自の緑調整係数 + // オフセット値);
    data[i + 2] = Math.min(255, (255 - b) * // 独自の青み強調係数 + // オフセット値);
}

2. プレビューと保存を分離する「二重ImageData管理」

高解像度の写真をそのままリアルタイムに加工しようとすると、モバイル端末ではフレームレートが著しく低下します。

この問題を解決するため、本ツールでは「プレビュー用（軽量）」と「保存用（高精細）」の2つの `ImageData` をメモリ上にキャッシュしています。エフェクトの切り替え時は軽量なプレビューデータのみを瞬時に更新し、最終的な保存時のみ高負荷な計算を実行する設計にすることで、サクサクとした操作感を実現しました。

// 描画ターゲットを動的に切り替える戦略
function applyEffect(isPreview) {
    // プレビュー時は軽量なキャッシュ、保存時はフルサイズのキャッシュを使用
    const sourceData = isPreview ? cachedImageDataPreview : cachedImageDataFull;
    if (!sourceData) return;

    // メモリコピーを最小限に抑えるため、Uint8ClampedArray を直接操作
    const outputData = new ImageData(new Uint8ClampedArray(sourceData.data), ...);
    
    // ここにピクセル演算処理が入ります
    
    ctx.putImageData(outputData, 0, 0);
}

3. リソースの枯渇を防ぐ「スマート・スケーリング」

最新のスマホ写真は長辺が4000pxを超えることも珍しくありません。これをそのままCanvasで処理すると、ブラウザが強制終了するリスクがあります。

そこで、画像読み込み時にアスペクト比を維持したまま、内部処理用の適正サイズへ動的にリサイズしています。これにより、品質と安定性のバランスを最適化しました。

// 解像度に応じた動的なリサイズ計算
const MAX_LIMIT = // 安定して処理可能な最大解像度;
let fw = img.width;
let fh = img.height;

if (fw > MAX_LIMIT || fh > MAX_LIMIT) {
    const scale = MAX_LIMIT / Math.max(fw, fh);
    // 縦横比を維持したまま整数値に丸める
    fw = Math.floor(fw * scale);
    fh = Math.floor(fh * scale);
}
// 算出されたサイズで内部Canvasを初期化
fullCanvas.width = fw;
fullCanvas.height = fh;

Developer's Note

「画像加工ツール」を作る上で、僕が一番大切にしているのは、ユーザーのプライバシーを1pxたりとも外部に漏らさないことです。

そのため、すべての計算をクライアントサイド（ブラウザ内）で完結させています。HEIC形式のデコードというブラウザ標準では難しい処理も、必要な時だけライブラリを動的インポート（Dynamic Import）することで、初期読み込みを重くすることなく実現しました。

「エモい」画像を生み出すための複雑なピクセル計算を、裏側でどれだけ軽快に動かせるか。フロントエンドエンジニアとしてのこだわりが、このツールのスピード感に詰まっています。