EyeDropper API 是 HTML5 原生拾色接口，支持 Chromium 浏览器（Chrome 119+等），需用户手势触发，返回 sRGBHex 或 rgb 字符串，不支持 Firefox/Safari，移动端暂未覆盖。
EyeDropper API 是 HTML5 提供的原生浏览器接口，用于调用系统级拾色器，直接从屏幕任意位置选取颜色并返回十六进制格式（如 #ff5733）或 RGB 字符串（如 rgb(255, 87, 51)）。它无需第三方库，但需注意兼容性与使用限制。
基础用法：调用拾色器并获取颜色
只需创建 EyeDropper 实例并调用 open() 方法，该方法返回一个 Promise，成功时解析出含 sRGBHex 属性的对象：
-
sRGBHex是标准 7 位十六进制颜色字符串（如#aabbcc），所有支持该 API 的浏览器都提供此项 - 部分浏览器（如 Chrome 119+）还额外提供
rgb属性，值为rgb(r, g, b)格式字符串 - 调用必须由用户手势（如
click、keydown）触发，不能在页面加载或定时器中自动执行
示例代码：
document.getElementById('pick-btn').addEventListener('click', async () => {
try {
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // 如 "#4caf50"
document.body.style.backgroundColor = result.sRGBHex;
} catch (err) {
console.error('拾色器不可用：', err.message);
}
});
兼容性检查与降级处理
目前仅 Chromium 内核浏览器（Chrome 119+、Edge 119+、Opera 105+）稳定支持，Firefox 和 Safari 尚未实现。使用前应检测 API 是否可用：
立即学习“前端免费学习笔记（深入）”；
- 通过
typeof EyeDropper !== 'undefined'判断支持性 - 不支持时可回退到纯 CSS/JS 颜色选择器（如
<input type="color">）或自定义取色面板 - 避免静默失败，建议给用户明确提示（例如按钮文字变为“浏览器不支持屏幕取色”）
实际使用注意事项
EyeDropper API 行为受浏览器策略约束，需留意以下细节：
- 每次调用都会弹出独立系统拾色器窗口，无法预设初始位置或限制选取区域
- 返回的颜色始终是屏幕当前像素的 sRGB 值，不受页面缩放、GPU 渲染差异或 HDR 模式影响（但系统级色彩管理可能轻微偏移）
- 移动端（Android Chrome）暂不支持；iOS Safari 明确不支持，且无计划上线时间
- 若用户取消操作，Promise 会以
AbortError拒绝，应捕获并忽略，而非报错
结合 input[type="color"] 做渐进增强
可将 EyeDropper 作为高级功能叠加在基础颜色输入上，提升专业场景体验：
- 保留
<input type="color" id="color-input">作为默认控件 - 添加“从屏幕取色”按钮，点击后调用 EyeDropper，并将结果赋值给该 input 元素的
value - 同步更新预览区背景、实时渲染效果等，保持 UI 一致性
不复杂但容易忽略：务必确保按钮有明确视觉反馈，且错误状态清晰可读。用户一旦发现“点一下就能吸屏幕颜色”，往往会觉得这个功能比调色板更直观可信。
