【JavaScript入門】画素の処理

　Canvas 2D API では、画面に描いたイラストや写真の 各ピクセル（画素） を直接読み書きできます。これにより、色調補正・モザイク・エフェクト合成・機械学習の前処理など「画像編集ソフト顔負け」の加工をブラウザだけで実装可能です。
　ここでは ImageData オブジェクトによる画素アクセスと、編集後ピクセルをキャンバスへ戻すまでの流れを整理し、サンプルで色チャネル入れ替え処理を体験します。

１．ImageData とは

1.1. 基本構造

プロパティ	説明
width	取り出した領域の横幅（px）
height	取り出した領域の高さ（px）
data	Uint8ClampedArray 形式の RGBA 値列（0‑255）、長さ = `width × height × 4`

　配列は 左上→右方向→折り返して下方向 の順に [R,G,B,A] が並びます。1 行分は width × 4 バイトです。

1.2. 取得・描画メソッド

メソッド	主な用途
getImageData(sx, sy, sw, sh)	指定矩形を ImageData として取得
putImageData(imgData, dx, dy)	取得済み ImageData をそのまま描画
putImageData(imgData, dx, dy, sx, sy, sw, sh)	ImageData 内の一部だけ描画

　クロスオリジン画像を描画した後はセキュリティ上 getImageData が例外を投げるため、同一オリジン or CORS 許可付き画像 を使うか、ローカル開発時は簡易サーバーを立てましょう。

２．ピクセル編集サンプル

ファイル名： pixels_demo.html

PNGファイルのダウンロードは、ここ「checker.png」からできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🧬 Pixel Processing Demo</title>
<style>
  body{font-family:"Segoe UI",sans-serif;background:#f9fcff;text-align:center;margin:2rem}
  h1{font-size:1.8rem;margin-bottom:1rem}
  canvas{border:1px solid #777;border-radius:6px;background:url(./checker.png)}
  #note{margin-top:.8rem;color:#00695c;font-weight:bold}
</style>
</head>
<body>
  <h1>🧬 画素の処理デモ</h1>
  <canvas id="stage" width="600" height="320"></canvas>
  <p id="note">中心領域の色チャンネルを入れ替えました！</p>

<script>
(() => {
  const cvs = document.getElementById('stage');
  const ctx = cvs.getContext('2d');
  const W = cvs.width, H = cvs.height;

  /* ① 背景に縦グラデーションを描く */
  for (let y = 0; y < H; y++) {
    const r = y / H * 255;          // 赤↑
    const g = 255 - r;              // 緑↓
    ctx.fillStyle = `rgb(${r},${g},180)`; // 青は固定
    ctx.fillRect(0, y, W, 1);
  }

  /* ② 中央 200×120 領域の画素を取得 */
  const sx = 200, sy = 100, sw = 200, sh = 120;
  const imgData = ctx.getImageData(sx, sy, sw, sh);
  const d = imgData.data;

  /* ③ R↔B を入れ替えるピクセル操作 */
  for (let i = 0; i < d.length; i += 4) {
    const r = d[i], g = d[i+1], b = d[i+2]; // A は d[i+3]
    d[i]   = b;  // R ← 元 B
    d[i+2] = r;  // B ← 元 R
    // g はそのまま
  }

  /* ④ 編集後の ImageData を戻す */
  ctx.putImageData(imgData, sx, sy);

  /* ⑤ 加工領域を枠線で可視化 */
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 4;
  ctx.strokeRect(sx, sy, sw, sh);
})();
</script>
</body>
</html>

ブラウザの出力例

背景は赤↔緑グラデーション（青成分固定）。
中央 200 × 120 px だけ赤と青が反転し、ターコイズ〜マゼンタ調の色帯になる。
黒枠で加工範囲が明示され、下に「中心領域の色チャンネルを入れ替えました！」と日本語メッセージ。

プログラム解説

ステップ	行	説明
背景生成	17‑22	1 ラインずつ色を変えて塗る簡易グラデーション
画素取得	26	`getImageData` で中心矩形の RGBA 配列を取得
編集処理	29‑34	4 バイト単位でループし R↔B を交換
描画反映	37	`putImageData` でオリジナルキャンバスへ書き戻す
枠線表示	40‑42	編集範囲が分かるように装飾

まとめ

ImageData で RGBA 生配列を取得し、4 バイトごとに好きな演算を適用できる。
編集後は putImageData で瞬時に反映。範囲指定で切り貼りも可能。
完成画像は toDataURL で PNG/JPEG 化してダウンロードや共有へ。

　これらの機能を組み合わせれば、ブラウザ上でリアルタイム画像加工ツールやエフェクト重ね合わせアプリを構築できます。まずは色チャンネルの入れ替えやグレースケールから試し、次にコンボリューションフィルターや GPU WebGL 連携へ発展させてみましょう。