colorPicker

by aio350

HTML

<canvas></canvas>

<input type="file">
<button>Pick</button>

CSS

canvas {
  display: none;
}

p {
  text-align: center;
  display: none;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

const input = document.querySelector('input')
const button = document.querySelector('button')

button.addEventListener('click', () => {
  const img = new Image()
  img.src = URL.createObjectURL(input.files[0])

  canvas.style.display = 'block'

  const p = document.createElement('p')
  document.body.appendChild(p)
  p.style.display = 'block'

  img.onload = () => {
    canvas.width = img.width
    canvas.height = img.height

    p.style.width = img.width + 'px'

    $.drawImage(img, 0, 0)
    img.style.display = 'none'
    document.body.removeChild(input)
    document.body.removeChild(button)
  }

  function pick(e) {
    let x = e.layerX
    let y = e.layerY
    let pixel = $.getImageData(x, y, 1, 1)
    let data = pixel.data
    let rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`
    p.textContent = rgba
  }

  canvas.addEventListener('mousemove', pick)
})