ホーム > カテゴリ > HTML5・JavaScript >

画像の指定位置の色(RGBA)を取得する

HTML5のcanvasを使用して画像の指定位置の色を取得するサンプルです。色はR(red:赤)、G(green:緑)、B(blue:青)、A(Alpha:不透明度)のRGBAを取得できます。

色の取得の体験

画像をクリックすると色を取得する事ができます。

256色のカラーパレット画像の外側をクリックするとキャンバスのデフォルトのRGBAが表示されます。これによりキャンバスのデフォルトは黒色でアルファチャンネルは0と言うことがわかります。

サンプルプログラム

キャンバスから色データを取得するにはcontext.getImageData()を使用します。このメソッドの戻り値はImageDataオブジェクトです。そのImageDataオブジェクトのdataプロパティに色データが含まれます。色はRGBAの順で格納されています。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="MyCanvas" width="300" height="300"></canvas>
<img id="img_test" src="test.png" style="display:none;">
<div id="msg"></div>
<script>

  // RGBから#ffffff形式へ変換する
  function RGB2bgColor(r,g,b) {

    r = r.toString(16);
    if (r.length == 1) r = "0" + r;

    g = g.toString(16);
    if (g.length == 1) g = "0" + g;

    b = b.toString(16);
    if (b.length == 1) b = "0" + b;

    return '#' + r + g + b;  
  }  
  
  var canvas = document.getElementById("MyCanvas");
  
  if (canvas.getContext) {
    // コンテキストの取得
    var ctx = canvas.getContext("2d");                
    var image = document.getElementById("img_test");

    image.onload = function () {
      
      // キャンバスをクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      
      // キャンバスの中心に画像を描画
      var x = (canvas.width - image.width) / 2;
      var y = (canvas.height - image.height) / 2;      
      ctx.drawImage(image, x, y);
    };
  }

  canvas.onclick = function(evt){
  
    //  マウス座標の取得
    var x = parseInt(evt.offsetX);
    var y = parseInt(evt.offsetY);

    //  指定座標のImageDataオブジェクトの取得 
    var imagedata = ctx.getImageData(x, y, 1, 1);

    //  RGBAの取得
    var r = imagedata.data[0];        
    var g = imagedata.data[1];
    var b = imagedata.data[2];
    var a = imagedata.data[3];
    
    canvas.style.backgroundColor = RGB2bgColor(r,g,b);
    document.getElementById("msg").innerHTML = 
      "Red: " + r + "  Green: " + g + "  Blue: " + b + "  Alpha: " + a;    
  }
  
</script>
</body>
</html>

注意事項

Chromeをお使いの方はローカルで実行するとセキュリティエラーが発生します。このエラーを回避するには「Uncaught SecurityErrorのエラー回避方法」をご覧ください。

参考サイト

Pixel manipulation with canvas(MDN)





関連記事


前の記事：canvasでドット絵用のキャンバスを作成する[1マス=1ドット]
次の記事：Javascriptで処理時間を計測する

公開日：2016年02月22日
記事NO：01789


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)