JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="col-box">
<div>XY: <span id="xy-txt"></span></div>
<div>RGBA: <span id="rgba-txt"></span></div>
<div class="row-box">Color: <div class="cell"></div></div>
<img id="tgt-img" src="http://i.imgur.com/3tU4Vig.jpg" alt="">  
</div>

CSS

.col-box{
  display: flex;
  flex-direction: column;
}
.row-box{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cell {
  height: 1em;
  width: 1em;
}

JavaScript

const imgElement = document.querySelector('#tgt-img');
imgElement.crossOrigin = '' // デモ用に外部から画像を取得するため

let context = null;
imgElement.onload = () => {
  // canvas 要素に画像を描画
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  context = canvas.getContext('2d');
  context.drawImage(imgElement,0,0, imgElement.width, imgElement.height);
  // 初期化時、画像クリック時に画像中の色情報を取得する関数を実行
  getColor();
  imgElement.addEventListener('click',e=>getColor(e.offsetX, e.offsetY));
}

function getColor(x=0,y=0){
  // canvas 中の座標を指定して該当部の色情報を取得
  const imgData = context.getImageData(x,y,1,1);
  // 取得した情報を画面に伝達
  document.querySelector('#xy-txt').innerText =`(${x},${y})`;
  document.querySelector('#rgba-txt').innerText =`rgba(${imgData.data.join(',')})`;
  document.querySelector('.cell').style.backgroundColor = `rgba(${imgData.data.join(',')})`;

}