JS实现取色

使用 input[type="color"] 元素

通过 HTML5 提供的原生颜色选择器快速实现取色功能：

<input type="color" id="colorPicker">
<script>
  document.getElementById('colorPicker').addEventListener('input', (e) => {
    console.log('Selected color:', e.target.value); // 输出 HEX 格式颜色值（如 #RRGGBB）
  });
</script>

通过 Canvas 获取像素颜色

适用于从图像或画布中提取特定坐标的颜色：

function getPixelColor(imageElement, x, y) {
  const canvas = document.createElement('canvas');
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageElement, 0, 0);
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  return `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
}

监听鼠标位置获取页面颜色

结合 document.elementFromPoint() 获取 DOM 元素颜色：

document.addEventListener('mousemove', (e) => {
  const element = document.elementFromPoint(e.clientX, e.clientY);
  if (element) {
    const style = window.getComputedStyle(element);
    console.log('Background color:', style.backgroundColor);
  }
});

第三方库实现高级取色

使用开源库（如 eyeDropper API 或 color-thief）扩展功能：

// 示例：eyeDropper API（需浏览器支持）
if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  eyeDropper.open().then(result => {
    console.log('Picked color:', result.sRGBHex);
  });
}

注意事项

• 跨域限制：通过 Canvas 获取图片颜色时，需确保图片具有 CORS 权限。
• 浏览器兼容性：EyeDropper API 仅部分现代浏览器支持，需做兼容检测。
• 性能优化：高频监听鼠标移动时建议使用防抖（debounce）减少计算压力。