Canvas 画像の情報を取得

指定座標の色情報を取得して、近似色のある範囲を透明にする

  1. 編集対象の画像を描画する
  2. 「上書き用の色情報」(透過色も可能)を宣言する
  3. 画像の指定座標から「比較用の色情報」を取得する
  4. 指定範囲内の1pixelごとに「比較用の色情報」とRGB値を比較する
  5. 条件にあった座標を「上書き用の色情報」で描画する

画像をクリックして「比較用の色情報」を取得してください

view source

JavaScript

var Editor = function(ctx){
  var that = {};

  var WIDTH = canvas.width;
  var HEIGHT = canvas.height;
  var ctx = canvas.getContext('2d');

  var img = new Image();
  img.src = "color.png" + '?' + new Date().getTime();
  var image;
  var rect = {
    x : 0,
    y : 0,
    w : 120,
    h : 120,
  };
  var checkmap = {
    x : 0,
    y : 0,
  };

  that.count = 0;
  that.count_max = 3;
  that.ready = false;

  that.init = function(){
    image = ctx.getImageData(40, 125, 1, 1);  // 1px by 1px のデータを取得
    ctx.drawImage(img, 0, 0, 160, 160, 0, 0, 160, 160);
    console.log('init:' + image);
		img.onload = function(){
    	that.ready = true;
		}
    ctx.beginPath();
    ctx.arc(70, 70, 60, 0, Math.PI*2, false);
    ctx.fill();
  }
  that.run = function(){
    rect.x+=5;
    rect.y+=5;
    that.count++;
  }
  that.click = function(e){
    //console.log(e);
    image = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);  // 画像データを取得
    ctx.putImageData(image, e.offsetY, e.offsetX);  // 画像データを書き込み
    console.log(image.data);
    that.convertColor(image);
  }
  that.draw = function(){
    ctx.drawImage(img, 0, 0, 160, 160, rect.x, rect.y, 160, 160);
    ctx.putImageData(image, 120, 40);  // 1px by 1px のデータを取得
  }

  that.convertColor = function(image){
    // 比較用の色データを1pixel取得して、指定範囲から近似色を比較、上書きする
    var dot = ctx.createImageData(1, 1);//上書き用データ
    image = image || ctx.getImageData(120, 1, 1, 1);//比較用データ

    console.log(WIDTH+':'+HEIGHT);
    // 以降、範囲内を1pixelずつ比較＆上書き
    var image2;
    var approximate = 120; //近似値
    var is_same = true;
    var i, j ,k;
    for(i=0; i<WIDTH; i++){
      for(j=0; j<HEIGHT; j++){
        is_same = true;
        image2 = ctx.getImageData(i, j, 1, 1);
        for(k=0; k<image.data.length; k++){
          if(
            image2.data[k] < image.data[k] - approximate || 
            image2.data[k] > image.data[k] + approximate
          ){
            is_same = false;
            break;
          }
        }
        if(is_same){
          ctx.putImageData(dot, i, j);
        }
      }
    }

  }

  return that;
}





/*
$(function(){
  var canvas = $('#canvas')[0];
  canvas.click(function(){
    editor.click();
  });
});
*/
$(function(){

  var canvas = document.getElementById('canvas');
  var editor = new Editor(canvas);
  editor.init();


  if(document.addEventListener){
    console.dir(canvas);
    canvas.addEventListener('click', function(e){
      editor.click(e);
    }, false);
  }

  (function init(){
    setTimeout(function(){
      editor.init();
      if(editor.ready){
        editor.convertColor();
        run();
      } else {
        init();
      }
    });
  })();

  function run(){
    var timer_id = setInterval(function(){
      editor.run();
      if(editor.count>editor.count_max){
        clearInterval(timer_id);
      }
    }, 500);
  }

});


function getColor(ctx){


}

CSS

*{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-get-color-x/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。