この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。 Canvas 2DのgetImageData()とputImageData()の公式資料を確認し、架空の色見本を加工する教材を整理しました。P1〜P5は同じChatGPT実行内の自己審査です。検証ステータス：📘 公式資料確認済み・V8ロジック5件PASS／実ブラウザ・Pages・WordPress未確認
画像の色は、画素（ピクセル）ごとの赤・緑・青の数値を変えると変化します。 今回は写真をアップロードせず、ブラウザが描く架空の8×8色見本で、明るさと白黒の仕組みを試します。加工前の画像は残るため、変更を元へ戻して比較できます。
| 項目 | 条件 |
|---|---|
| 対象 | Canvas 2D対応ブラウザ（実ブラウザ未確認） |
| 技術 | ImageData、JavaScript、HTML |
| 費用 | 外部ライブラリ・APIキー・ログイン不要 |
| データ | ブラウザ内で生成する架空の色。写真不要 |
| 操作 | 明るさスライダー・白黒チェック・初期化 |
まず試す：色を動かして比べる
🔷 操作デモ
Canvasの色加工デモを開く（公開URLの到達・ブラウザ動作は未確認）
Daily CodeのソースとREADME（GitHub保存済み）最初の3操作
1. 「明るさ」を0から+60へ動かします。
2. 左の元画像と右の加工後を比べ、下の「中央のRGB」を見ます。
3. 「白黒にする」にチェックし、右側の色とRGB数値をもう一度確認します。
左は変更されない元の色見本、右はスライダーに合わせて変化する設計です。赤・緑・青が区別しづらい場合も、「中央のRGB: 元 → 加工後」という数値表示で違いを追えます。下表は仕様とV8ロジック検査からの期待値であり、公開デモの実測結果ではありません。
| 操作 | 期待する変化 |
|---|---|
| 初期値0・白黒OFF | 左右のRGBが一致 |
| 明るさ+60 | 各成分が60増加。ただし255で止まる |
| 明るさ-100 | 各成分が100減少。ただし0で止まる |
| 白黒ON・明るさ0 | RGBの3成分が同じ値 |
| 初期値に戻す | 0・白黒OFFに戻る |
操作後はここを見る
「色が変わった」で終わらせず、中央のRGB値がどう変わったかを読みます。たとえば元のRGBが20, 210, 240なら、明るさ+60の処理結果は80, 255, 255です。2番目と3番目は255を超えないように丸められます。この数値例はGitHub保存JSのロジックで検査しました。
なぜ数字を変えると画像が変わるのか
ブラウザのCanvasは、描画した画像の画素データをgetImageData()で取得できます。一般的な8ビットRGBA形式では、1画素にR（赤）・G（緑）・B（青）・A（透明度）の4成分が並びます。各成分は0〜255です。たとえば192×192画素なら、192×192×4で147,456個の成分を扱います。
putImageData()は加工したImageDataをCanvasへ描き戻します。今回は左のCanvasを描いた直後に元データを取得し、スライダーを動かすたびに必ず元データから加工します。前回の加工結果へさらに補正を足すと、スライダーを0へ戻しても元の色に戻らなくなるからです。
flowchart LR
A["架空の色見本を描く"] --> B["元のRGBAを取得"]
B --> C["元データをコピー"]
C --> D["明るさ・白黒を計算"]
D --> E["右Canvasへ描画"]
D --> F["RGB数値を表示"]
この図は教材の処理順を簡略化したものです。ブラウザ内部の色管理やGPU処理まで示した図ではありません。
コードの核心：4つずつ読む
次は完成版のJavaScriptから、考え方に必要な部分を短くしたものです。完成コードではありません。
for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i];
const g = pixels[i + 1];
const b = pixels[i + 2];
// i+3は透明度。今回の教材では変更しない。
}
i += 4とするのは、1画素の4成分をまとめて処理するためです。明るさを変えるときはRGBそれぞれに同じ増減値を加え、Uint8ClampedArrayへ格納します。0未満や255超の値は範囲内へ収まります。透明度Aはそのままコピーします。
白黒は、RGBをすべて同じ数値へそろえる操作です。今回の教材は0.2126R + 0.7152G + 0.0722Bを四捨五入する学習用の近似式を採用しています。これは色空間変換やディスプレイの知覚輝度を厳密に再現するものではありません。厳密な色処理が必要な用途では、色空間とガンマを考慮した別の実装が必要です。
1か所だけ変えてみる
まず白黒をOFF、明るさを0に戻し、中央のRGBが左右で一致することを確認します。次に明るさだけを+60へ変えます。左の元画像は同じなのに右だけ明るくなる設計です。ここで白黒も同時に変えると、どちらの処理で数値が変わったか分かりにくくなります。
255に近い色ほど変化が頭打ちになります。たとえば240へ60を加えても結果は300ではなく255です。これを「白飛びに近い現象」として観察できます。ただし、この教材は写真の露出補正や色補正ソフトと同じ処理ではありません。
もう一つの比較は元データを保つかどうかです。完成版では元データを一度取得して保持し、表示のたびに新しい出力配列を作ります。加工後の配列を次の入力に使う設計へ変えると、明るさを何度も動かすだけで数値が累積します。記事のサンプルはこの誤りを避けています。
自分のPCで動かす
HTMLとJavaScriptを同じフォルダに保存してindex.htmlを開く構成です。外部ライブラリのCDN、画像素材、ネットワークAPIは不要です。組織PCではローカルHTMLの実行ポリシーを確認してください。このローカル起動も今回の実ブラウザでは未実行です。
テストコードはDaily Codeのtestsに分けています。Node.jsを利用できる環境なら、リポジトリのルートで次のコマンドを実行する設計です。このNodeコマンドは今回未実行です。
node --test web/canvas-pixel-lab/tests/pixels.test.js
うまく動かないとき
| 症状 | まず確認 | 次の対処 |
|---|---|---|
| 「読み込み中」のまま | app.jsの配置 | Consoleでエラーを確認 |
| 左右とも空白 | Canvas 2Dの対応 | 対応ブラウザで試す |
| +60でも変化が小さい | RGBが255に近い | 暗い色のマスで比較 |
| 0へ戻しても違う | 元データを再利用しているか | 「初期値に戻す」を押す |
| 写真でSecurityError | 外部画像の取得元 | 無断画像を使わず架空データへ戻す |
本教材は画像アップロードを行いません。将来外部画像を読み込む改造をする場合は、著作権、個人情報、同一オリジンとCORSの制限を確認してください。外部サイトの画像を勝手に取得して回避策を探す手順ではありません。
仕事・学習で使うなら
社内研修で「画像のRGBとは何か」を説明するとき、色の変化だけでは理解に差が出ます。そこで左に元画像、右に加工後を並べ、RGB数値・変更量・リセットをセットにすると、色覚や画面設定が異なる人も変化の理由を追いやすくなります。重要な判定を色だけで伝えない設計は、ダッシュボードや監視画面にも応用できます。
実務の写真加工へ発展させる場合、画像サイズが大きいほど全画素を同期処理する負荷が増えます。処理時間、入力画像の権利・秘密、色空間、元画像の保全、出力の比較方法を先に設計してください。教材の192×192画素でのロジック検査を、大画像の処理性能保証へ読み替えてはいけません。
追加実験：RGBと透明度を分けて観察する
Canvasの画像データには赤・緑・青だけでなく、透明度を表すアルファ値も含まれます。白黒化の実験では、各画素のRGBを同じ明るさの値に置き換え、アルファをそのまま残すかを確認します。透明部分の色を強めても、画面上の見え方が変わらない場合があります。期待した結果にならないときは、色を変えたのか透明度を変えたのかを分けて調べます。
明るさを加算すると、計算上は各色の値が0〜255の範囲を超えることがあります。計算結果とCanvasに戻した画素値を区別してください。元画像がすでに明るい場合、増加幅を大きくしても白に近づき、細かな違いがなくなることがあります。暗い部分、中間の灰色、明るい部分を含む画像を使い、どの領域の変化が見えたかを記録すると理解が進みます。
色の変化が大きいほど正しいとは限りません。最初の状態に戻す操作で元画像が再現されるか、明るさ0を指定した場合に画面が変わらないかを比べることも有効です。白黒化と明るさ調整を同時に有効にしたときは、どちらを先に処理するかで計算結果が変わることがあります。サンプルの処理順を読み、同じ操作を繰り返すと元画像へ累積して処理を加えるのか、毎回原本から再計算するのかを確認します。
自分の画像を取り込む実装へ発展させる場合は、画像の読み込み元とブラウザのオリジン制限に注意します。別サイトの画像をCanvasへ描いてから画素を読むと、セキュリティ制限で取得が拒否されることがあります。まず教材の架空画像で動作を確かめ、対象画像の著作権と共有範囲を確認してください。機密資料や人物写真を無断で教材に持ち込まないことも重要です。
公式資料
MDN：Canvasのピクセル操作（確認：2026-10-31）
MDN：getImageData()（確認：2026-10-31）
MDN：putImageData()（確認：2026-10-31）
GitHubサンプル
Daily Code：READMEと完成ソースに実装とロジックテストを保存しています。記事内のコードは理解用の抜粋であり、完全版は上記リンクを参照してください。
検証範囲と未確認事項
2026年11月1日、MDNのgetImageData()・putImageData()・ピクセル操作の公式資料を再確認しました。GitHubの固定コミットにあるJavaScriptを読み戻し、V8で5条件（初期値、上限、下限、白黒、入力不変）を再検査しました。Node標準テスト、実ブラウザ、公開Pagesへの到達、WordPressの青い引用囲み、アイキャッチ、モバイル表示、印刷/PDFは未確認です。Markdownの引用構造を整えただけで、青色表示や本番公開を確認したことにはなりません。
