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

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

このツールの「暗視カメラ（Night Vision）」モードでは、単純なグリーンのオーバーレイではなく、ピクセルごとの輝度計算に基づいた色相置換を行っています。RGB値から人間が感じる明るさを算出し、緑のチャンネルを強調、赤と青を極端に減衰させることで、本物のナイトビジョン装置のような質感を生み出しています。

メリット： 標準のCSSフィルタ（grayscale等）では表現できない「特定のチャンネルのみのブースト」が可能になります。また、ピクセルデータを直接操作することで、古いブラウザやモバイルSafariでの挙動を安定させています。

// 輝度(Luma)に基づいた暗視モードのピクセル操作
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i+1], b = data[i+2];
    
    // 独自の輝度計算ロジック（Luma係数の適用）
    const luma = // ここに加重平均の計算が入ります;

    // ナイトビジョン特有の色調変化を再現
    data[i] = luma * // 独自の赤色減衰率;
    data[i+1] = luma * // 独自の緑色強調率 + 補正値;
    data[i+2] = luma * // 独自の青色減衰率;
}

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

監視カメラ映像に欠かせないデジタルノイズですが、高解像度なCanvasの全面に対して毎フレーム乱数を生成して描画するのは、GPU負荷が極めて高くなります。本ツールでは、小さな「ノイズパターン用のCanvas」を別途生成し、それをメインCanvasに repeat モードで敷き詰める手法を採用しています。

メリット： 計算が必要なのは小さな正方形エリアのみ。メイン描画時はブラウザのネイティブなパターンフィル機能を利用するため、4K近い巨大な画像でもノイズ処理を瞬時に、かつ低メモリで実行できます。

// 小さなノイズパターンを生成し、タイリングとして活用
function getNoisePattern(intensity) {
    const pSize = // 独自のタイルサイズ;
    const pCanvas = document.createElement('canvas');
    // ...ピクセルごとにランダムなグレースケールを描画
    
    return ctx.createPattern(pCanvas, 'repeat');
}

// 描画時の適用
ctx.fillStyle = noisePattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);

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

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

メリット： ユーザーがどんなサイズ、アスペクト比の画像をアップロードしても、常に「監視カメラ映像としての黄金比」でスタンプが配置されます。

// 画像の最小辺または面積に基づいたダイナミック・タイポグラフィ
const w = mainCanvas.width;
const h = mainCanvas.height;

// 画像サイズに比例したフォントサイズ算出
const fontSize = Math.max(minLimit, Math.floor(Math.min(w, h) * // 独自の比率係数));
ctx.font = `bold ${fontSize}px "Courier New", monospace`;

// 相対的なパディング位置の計算
const padding = fontSize;
ctx.fillText(label, padding, padding); // 左上
ctx.fillText(date, w - padding, h - padding); // 右下（位置合わせ）

Developer's Note

このツールを開発するにあたって最もこだわったのは、モノクロモードでの「自然な階調」です。実は、単純に彩度を落とすだけでは、明るい部分が白飛びしすぎて監視カメラっぽさが薄れてしまうことがあります。そこで、輝度計算の係数を微調整し、少しだけ暗部のコントラストを残すことで、不気味な「監視されている感」を演出しました。

また、iPhoneユーザーの利便性を考え、HEIC形式の自動変換機能をブラウザ完結で実装しています。サーバーに一切データを送らないというポリシーを守るため、heic2any という重いライブラリを必要な時だけ動的にインポートする工夫も施しました。

「ネタ画像」を作るツールではありますが、その裏側では、最新のブラウザ技術と古典的な画像処理アルゴリズムを組み合わせて、安全で軽快な体験を提供することを目指しました。