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

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

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

入力

写真を選び、フィルム風の色や強さを調整します。

処理

画素の色の反転や着色を行い、ネガフィルムを思わせる色へ置き換えます。

出力

出力は JPEG（品質指定 0.95）です。

まず確認する点：実際の撮影フィルムをスキャンして色を復元する処理とは異なります。肌や明部の色がどう反転したかを見ます。

仕上がりの例

写真の色を反転し、ネガフィルム風にした例です。

画像を拡大

加工前・加工後

閉じる

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

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

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

記録の入力画像

800×1222px (JPEG)

記録の出力画像

800×1222px (JPEG)

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

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	🎞️ カラーネガフィルム風 青みを強調した、エモくて不思議な写真になります。	—

記録では「このエフェクトで保存する」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

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

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

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

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

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

本ツールでは、反転後のRGB各チャンネルに対し、シアン系の色へ寄せる固定の重み付けを適用しています。赤（R）の出力を抑え、青・シアン（B/C）を強調することで、ネガフィルムを思わせる色を作ります。実際のフィルム銘柄の色応答やオレンジマスクを測定して補正するものではありません。

フィルム風モードで1画素を変換する例です。通常反転と異なり、青を強める係数と色ごとのオフセットを加えます。

function filmNegative(r, g, b) {
  return [Math.min(255, (255 - r) * 0.85 + 20),
    Math.min(255, (255 - g) + 10),
    Math.min(255, (255 - b) * 1.25 + 10)];
}

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

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

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

3. 処理画素数を抑える読み込み時の縮小

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

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

出力の仕様と確認する点

保存用は長辺最大 1500px の処理画像です。プレビューと保存用の ImageData を別に保持しますが、元の高解像度を制限なく書き出す意味ではありません。出力は JPEG（品質指定 0.95）です。

通常反転は各 RGB を 255 から引き、モノクロ反転は輝度を求めてから反転します。フィルム風は色の偏りと上限処理があるため、もう一度加工しても元画像には戻りません。

実際に撮影したネガフィルムを正しい色に現像するための色校正、露出調整、フィルムごとのプロファイルは備えていません。写真の色を反転する演出として使います。