HTML5のCanvas要素に描画した画像の色を変更する方法

HTML5のCanvas要素に描画した画像の色を変更したい場合は、ピクセルデータを直接操作する方法が有効です。画像の描画には drawImage() メソッドを使用し、その後に getImageData() と putImageData() を組み合わせることで、各ピクセルのRGB値を自由に書き換えられます。以下にサンプルコードを紹介します。

function display(img, red, gr, bl) {
  // 画像の色を変更するための関数
  var canvas1 = document.createElement('canvas'); // canvas要素の生成

  canvas1.width = img.width;   // canvasの幅を画像に合わせて設定
  canvas1.height = img.height; // canvasの高さを画像に合わせて設定

  var ctx1 = canvas1.getContext('2d');
  ctx1.drawImage(img, 0, 0);   // 画像をcanvasに描画

  // 画像のピクセルデータを取得
  var myImg = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);

  // 4バイト（R, G, B, A）ごとにループして色を合成
  for (var t = 0; t < myImg.data.length; t += 4) {
    myImg.data[t]     = red | myImg.data[t];
    myImg.data[t + 1] = gr  | myImg.data[t + 1];
    myImg.data[t + 2] = bl  | myImg.data[t + 2];
  }

  ctx1.putImageData(myImg, 0, 0); // 変更後の画像データをcanvasに書き戻す
  return canvas1;
}

処理の流れ

1. canvas要素の生成：document.createElement('canvas') で新しいcanvasを作成し、描画対象の画像と同じ幅・高さを設定します。
2. 画像の描画：drawImage() メソッドを使って、元画像を座標 (0, 0) に描画します。
3. ピクセルデータの取得：getImageData() でcanvas全体のピクセルデータを取得します。データはRGBA形式で、1ピクセルあたり4つの要素（赤・緑・青・アルファ）が格納されています。
4. 色の変更：ループを4バイトずつ進めながら、ビット演算子のOR（|）を使って各ピクセルのRGB値に指定した色成分を合成します。
5. データの書き戻し：putImageData() で加工済みのピクセルデータをcanvasに反映し、色が変更された画像が完成します。

実装時の注意点

• getImageData() は同一オリジンポリシーの制約を受けるため、別ドメインの画像を読み込んだcanvasに対して呼び出すとセキュリティエラーが発生します。クロスオリジンの画像を扱う場合は、サーバー側でCORSヘッダーを設定し、img 要素に crossorigin="anonymous" を指定してください。
• ビット演算ORによる色合成は、元の色を保ちつつ特定の色味を強調したい場合に便利です。単純に上書きしたい場合は、代入（=）や乗算によるブレンドなど、目的に応じた演算方法を選択するとよいでしょう。
• 大きな画像を処理する場合はループ回数が多くなるため、パフォーマンスへの配慮が必要です。

この手法を応用すれば、セピア調への変換、グレースケール化、色反転など、さまざまな画像エフェクトをJavaScriptだけで実装できます。