監視カメラの質感を再現する
Canvasエフェクトと描画最適化

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

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

入力

写真と時刻などの表示情報、ノイズの強さを指定します。

処理

色調と走査線、ノイズ、文字をCanvasへ重ね、監視カメラ風の静止画を作ります。

出力

入力は長辺 1500px 以下に縮小し、保存は JPEG（品質指定 0.95）の静止画です。

まず確認する点：表示時刻を撮影証拠として検証しません。ノイズを上げて文字が読めなくなっていないか確認します。

仕上がりの例

写真に走査線と日時表示を加え、監視カメラ風にした例です。

画像を拡大

加工前・加工後

閉じる

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

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

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

記録の入力画像

800×805px (JPEG)

記録の出力画像

800×805px (JPEG)

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

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	標準	—
表示テキスト	CAM-01 / REC 🔴	初期値 CAM-01 / REC 🔴
日付・時刻	2026/10/08 18:12:01	初期値 ページを開いた現在の日時
ノイズ強度	30	初期値 30 ／ 範囲 0〜100
走査線（スキャンライン）	40	初期値 40 ／ 範囲 0〜100

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

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

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

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

1. Luma（輝度）ベースの動的ピクセルエフェクト

このツールの「暗視カメラ（Night Vision）」モードでは、単純なグリーンのオーバーレイではなく、ピクセルごとの輝度計算に基づいた色相置換を行っています。RGB値から人間が感じる明るさを算出し、緑のチャンネルを強調、赤と青を極端に減衰させることで、暗視カメラを思わせる緑色の演出を加えます。暗所で失われた情報を復元する機能ではありません。

メリット： 標準のCSSフィルタ（grayscale等）では表現できない「特定のチャンネルのみのブースト」が可能になります。また、ピクセルデータを直接操作することで、Canvas の色フィルタに依存せず RGB を変更します。全ブラウザの動作を保証するものではありません。

暗視モードの色変換を1画素に適用する例です。実装では Uint8ClampedArray に書き戻す際に 0〜255 の範囲へ収まります。

function nightVision(r, g, b) {
  const y = 0.299 * r + 0.587 * g + 0.114 * b;
  return new Uint8ClampedArray([y * 0.3, y * 1.5 + 20, y * 0.4]);
}

2. パターンタイリングによる軽量ノイズ生成

監視カメラ映像に欠かせないデジタルノイズですが、高解像度なCanvasの全面に対して乱数を生成して描画する場合、画素数に比例して乱数生成と描画の作業が増えます。本ツールでは、小さな「ノイズパターン用のCanvas」を別途生成し、それをメインCanvasに repeat モードで敷き詰める手法を採用しています。

メリット： 計算が必要なのは小さな正方形エリアのみ。メイン描画時はブラウザのネイティブなパターンフィル機能を利用するため、画像全体に乱数を作る場合より、ノイズ生成の対象画素を少なくできます。タイルは再描画ごとに作り直すため、同じ設定でもノイズ模様は変わります。

3. 解像度に依存しない動的テキスト配置

日付や「REC」といったスタンプのフォントサイズや余白は、画像の絶対解像度（ピクセル数）に応じて動的に計算されます。これは、1000pxの画像と4000pxの画像で同じ「32px」を適用すると、巨大な画像では文字が豆粒のように見えてしまう問題を解決するためです。

メリット： ユーザーがどんなサイズ、アスペクト比の画像をアップロードしても、短辺を基準にスタンプの大きさが決まります。長いラベルや日付は画像端からはみ出す場合があるため、プレビューで確認します。

出力の仕様と確認する点

入力は長辺 1500px 以下に縮小し、保存は JPEG（品質指定 0.95）の静止画です。REC 表示や日時は描画した文字であり、実際の録画状態や撮影日時を証明するものではありません。

ノイズは 256×256px のタイルを繰り返します。走査線の幅は max(3, floor(高さ / 200)) で、同じ幅の隙間を空けて描きます。ノイズを 0 にすると色変換と文字を確認しやすくなります。

モノクロは RGB を加重平均した値にそろえ、暗視は緑を増やします。明るい部分は緑成分が上限に達するため、元画像の階調をすべて維持する処理ではありません。