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

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


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;
  }
}

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

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