EyeDropper

利用 EyeDropper 可以实现一个简单的拾色器。目前兼容性不是很好（2024/2/10，仅 Chrome 和 Edge 支持）

EyeDropper 示例

<button id="start-button">打开拾色器</button> <span id="result"></span>

document.getElementById('start-button').addEventListener('click', () => {
  const resultElement = document.getElementById('result')

  if (!window.EyeDropper) {
    resultElement.textContent = '你的浏览器不支持 EyeDropper API'
    return
  }

  const eyeDropper = new EyeDropper()

  // eyeDropper
  //   .open()
  //   .then((result) => {
  //     resultElement.textContent = result.sRGBHex
  //     resultElement.style.backgroundColor = result.sRGBHex
  //   })
  //   .catch((e) => {
  //     resultElement.textContent = e
  //   })

  try {
    const result = await eyeDropper.open()
    resultElement.textContent = result.sRGBHex
    resultElement.style.backgroundColor = result.sRGBHex
  } catch (e) {
    resultElement.textContent = e
  }
})

input[type="color"] 实现拾色器

<input type="color" id="color" value="#ff0000" /> <span id="test1"></span>

const input = document.getElementById('color')
input.addEventListener('input', function () {
  const color = input.value
  const span = document.getElementById('test1')
  span.style.backgroundColor = color
  span.innerText = color
})

参考

• MDN - EyeDropper API