画像内のクリックした箇所のRGB色情報を取得する

ローカル画像も投稿可能 (サーバには送信しないので自由にどうぞ)

js-canvas-get-color.png

support drag drop image upload.

view source

JavaScript

// クリックした画像の箇所の色情報を取得する


var readyCanvas = function(){
  var width = img.naturalWidth || 400;
  var height = img.naturalHeight || 400;
  console.log({
    width:width,
    height:height,
  });

  canvas.width = width;
  canvas.height = height;
  ctx.clearRect(0, 0, width, height); 

  div.style.width = width + 'px';
  div.style.maxWidth = '100%';
  div.style.height = height + 'px';
  div.style.margin = '0 auto';
  div.style.position = 'relative';
  div.style.top = 0;
  div.style.left = 0;
  img.style.position = 'absolute';
  img.style.top = 0;
  img.style.left = 0;
  canvas.style.position = 'absolute';
  canvas.style.top = 0;
  canvas.style.left = 0;
  msg.style.color = '#eee';
  msg.style.fontSize = '32px';
  msgHSL.style.color = '#eee';
  msgHSL.style.fontSize = '32px';

  var x = (canvas.width - img.width) / 2;
  var y = (canvas.height - img.height) / 2;      
  ctx.drawImage(img, x, y);
}



var div = document.getElementById('target');     
var img = div.getElementsByTagName('img')[0];
var src = img.src;
img.src = '';

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.setAttribute('accept', 'image/*');
div.after(inputFile);
inputFile.onchange = function() {
  let file = this.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    img.src = reader.result;
  }
}

var msg = document.createElement('p');
var msgHSL = document.createElement('p');
div.appendChild(canvas);
div.after(msg);
div.after(msgHSL);





canvas.onclick = function(evt){

  var x = parseInt(evt.offsetX);
  var y = parseInt(evt.offsetY);

  var imagedata = ctx.getImageData(x, y, 1, 1);

  var r = imagedata.data[0];        
  var g = imagedata.data[1];
  var b = imagedata.data[2];
  var a = imagedata.data[3];
  
  var rgba = 'rgba(' + [r,g,b,a].join(',') + ')';
  console.log(rgba);
  msg.style.backgroundColor = rgba;
  msg.textContent = rgba;    

  var [h ,s, l] = RGBtoHSL(r,g,b);
  var hsl = `hsl(${h}, ${s}%, ${l}%)`;
  msgHSL.style.backgroundColor = hsl;
  msgHSL.textContent = hsl;    
}


img.onload = function () {
  readyCanvas();
};
img.src = src;

















var RGBtoHSL = function (r,g,b){
  var h = 0;
  var s = 0;
  var l = 0;
  var max = Math.max(r,g,b);
  var min = Math.min(r,g,b);
  var md = max-min;

  if(md>0){
    if(max === r){
      h = 60 * (g-b) / md;
    } else if(max === g){
      h = 60 * (b-r) / md + 120;
    } else if(max === b){
      h = 60 * (r-g) / md + 240;
    }
  }

  if(h<0){
    h+=360;
  }

  var cnt = (max+min)/2;
  if(cnt<128){
    s = md / (max+min);
  } else  {
    s = md / (510-(max+min));
  }

  l = (max+min)/2;

  h = Math.round(h);
  l = Math.round(l/255 *100);
  s = Math.round(s * 100);
  return [h,s,l];
}








var  dragArea = document.body;
dragArea.ondragstart = function(event){
  if(!event.dataTranfer){return;}
  event.dataTranfer.addElement(container);
}
dragArea.ondragover = function(event){
  event.preventDefault();
}
dragArea.ondragleave = function(event){
  event.preventDefault();
}
dragArea.ondrop = function(event){
  event.preventDefault();
  console.log(event.dataTransfer.files);
  if(!event.dataTransfer.files.length){return;}
  var file = event.dataTransfer.files[0];
  fileNameDef = file.name.substr(0,6);

  var reader = new FileReader();
  reader.readAsDataURL(file)

  reader.onload = function(){
    img.src = reader.result;
  }
}






CSS

HTML

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

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

ABOUT

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

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

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

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

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

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

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