html怎么创建EyeDropper取色器_html EyeDropper API屏幕取色器工具【最全】-html教程-PHP中文网

eyedropper api 仅 chromium 内核浏览器（chrome≥113、edge≥113、opera≥99）原生支持，firefox 和 safari 完全不支持；调用前须检测 'eyedropper' in window，且必须由用户手势触发 open()，返回唯一稳定字段 srgbhex。

html怎么创建eyedropper取色器_html eyedropper api屏幕取色器工具【最全】

EyeDropper API 在 Chrome 113+ 才可用

不是所有浏览器都支持 EyeDropper，目前仅 Chromium 内核（Chrome ≥113、Edge ≥113、Opera ≥99）原生支持，Firefox 和 Safari 完全不支持，且无 polyfill 可用。调用前必须检测兼容性：

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  // ✅ 安全使用
} else {
  console.error('EyeDropper not supported');
  // ❌ 降级方案：色盘 + 坐标采样（受限于跨域 canvas）
}

注意：EyeDropper 是构造函数，不是静态方法；不能在 iframe 中调用（除非 sandbox="allow-scripts allow-same-origin" 且同源）。

调用 `open()` 必须由用户手势触发

直接在页面加载时执行 eyeDropper.open() 会被浏览器静默拒绝，控制台报错 DOMException: Permission denied。必须绑定到明确的用户交互事件上，例如：

click、pointerdown（推荐）
keydown（需判断是否为可触发键，如 Enter）
不能用 input、focus、scroll 等非意图性事件

示例正确写法：

SolidPoint

Youtube视频总结器，快速将Youtube长视频压缩成文字摘要

下载

document.getElementById('pick-btn').addEventListener('click', async () => {
  try {
    const { sRGBHex } = await eyeDropper.open(); // 返回 { sRGBHex: '#ff5733' }
    console.log(sRGBHex);
  } catch (err) {
    if (err.name === 'AbortError') return; // 用户取消
    console.error(err);
  }
});

`sRGBHex` 是唯一稳定返回字段，别依赖其他属性

当前规范只保证返回 sRGBHex 字符串（如 '#a3c4f0'），其他字段（如 rgba、hsl）是实验性或未标准化的，不同版本 Chromium 表现不一致：

Chrome 113–120：仅返回 sRGBHex
某些 Canary 版本曾短暂返回 rgb 对象，但已移除
不要解析 result.toString() 或假设存在 .hex 属性

如需 RGB 数值，自己解析 sRGBHex：

const hex = result.sRGBHex; // '#ff5733'
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);