ピクセル輝度解析と縦書きCanvas描画の裏側

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

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

入力

写真に加え、匿名表示と証言の文字、暗さ・ノイズを入力します。

処理

暗い色調と粒子を写真へ重ね、縦書きまたは横書きの文字を描きます。

出力

保存は JPEG（品質指定 0.9）の静止画です。

まず確認する点：暗くしただけでも顔や背景が分かる場合があります。匿名を目的にする場合は、表現の雰囲気と情報を隠せた範囲を別に確認します。

仕上がりの例

写真を暗くし、匿名インタビュー風の字幕を加えた例です。

画像を拡大

加工前・加工後

閉じる

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

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

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

記録の入力画像

800×1066px (JPEG)

記録の出力画像

800×1066px (JPEG)

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

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	ノーマル、縦書き	—
シルエットの濃さ（暗さ）	80	初期値 80 ／ 範囲 30〜100
TVノイズ（走査線の強さ）	20	初期値 20 ／ 範囲 0〜50
人物紹介テロップ（下部固定）	おやつ事情に詳しい猫（仮名）	初期値 都内勤務 Aさん(仮名)
💬 自由な字幕（語り）	その件については お答えできません	初期値 空欄
文字サイズ	40	初期値 40 ／ 範囲 10〜100
ヨコ位置	15	初期値 15 ／ 範囲 5〜95

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

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

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

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

1. Luma（輝度）ベースの動的シルエット・フィルタ

画像をシルエット化する際、全ピクセルの明るさを一律に下げるだけでは、のっぺりとした不自然な画像になってしまいます。本ツールでは、各ピクセルのRGB値から人間が感じる明るさ「Luma」を算出し、特定のしきい値を境に階調を圧縮する処理を行っています。

メリット： 背景の明るい部分は比較的残しつつ、人物の顔など「影になっている部分」を重点的に潰すことで、テレビ番組の逆光演出のようなミステリアスな質感をシミュレートできます。

RGB 1画素を暗くする部分だけを関数にした例です。人物検出は行わず、画面全体の明るさを判定します。

function silhouettePixel(r, g, b, darkness = 80) {
  const luma = 0.299 * r + 0.587 * g + 0.114 * b;
  const gain = luma < darkness * 2.5 ? 0.1 : 0.3;
  return [r * gain, g * gain, b * gain];
}

2. 1文字ずつの座標変換による「Canvas縦書き」実装

HTML5 Canvasには、標準でテキストを縦書きにする機能が存在しません。本ツールでは、文字列を1文字ずつ分割し、Canvasの座標系を文字サイズに合わせて移動させながら垂直方向にレンダリングしていく独自のレイアウトエンジンを実装しています。

メリット： ブラウザの制約を超えて、日本語ドキュメンタリー特有の「語りの字幕」を自由な位置に配置できます。また、長音符「ー」や括弧、句読点などの記号は、90度回転させて位置を微調整する処理を加えることで、自然な縦書きを実現しています。

3. クライアントサイドでの画像リサイズ・ガードレール

最近のスマートフォンの写真は極めて高解像度であり、そのままCanvasでピクセル操作を行うとメモリ不足でブラウザがクラッシュするリスクがあります。本ツールでは、読み込み時にアスペクト比を維持したまま、処理に最適な最大解像度へ動的にリサイズしています。

メリット： 処理の高速化だけでなく、出力の画素数を減らします。ファイル容量を指定する機能ではないため、保存サイズは写真の内容によって変わります。

出力の仕様と確認する点

暗さは 30〜100 で、値を上げるほど RGB を 10% にする画素が増えます。明るい画素も 30% に減光します。顔の形や服、背景から人物を推測できる場合があり、匿名化を保証する加工ではありません。

読み込み時は長辺 1500px 以下に縮小し、描画時にさらに幅を 1080px 以下にします。保存は JPEG（品質指定 0.9）の静止画です。走査線は 4px 間隔で 2px の黒帯を重ねます。

下のテロップは1行で、長文の自動折り返しはありません。追加字幕は改行に対応し、縦書きでは改行ごとに左へ移動します。絵文字や結合文字は文字分割の都合で崩れる場合があるため、保存前に端の欠けも確認してください。