EyeDropper API 不能直接在 HTML 页面里调用，必须通过用户手势触发的 JavaScript 调用，且需 HTTPS 或 localhost 安全上下文；仅 Chromium 浏览器（Chrome/Edge ≥113）支持，Safari/Firefox 不支持；返回格式不固定，需兼容 sRGBHex 或 r/g/b/a 字段。
EyeDropper API 能否直接在 HTML 页面里调用
不能直接通过 HTML 标签或纯静态 HTML 触发，EyeDropper 是 JavaScript 运行时 API，必须由用户手势（如 click、pointerdown）驱动，且页面需运行在安全上下文（https:// 或 localhost）。HTTP 协议下会直接抛出 SecurityError。
调用 EyeDropper 的最小可行代码结构
必须实例化 EyeDropper 对象并调用其 open() 方法，该方法返回 Promise，成功后解析出 {sRGBHex: string} 或 {r: number, g: number, b: number, a: number}（取决于浏览器实现）。
常见错误：在非用户事件回调中调用（如 setTimeout、load 事件），会导致 NotAllowedError。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定到明确的用户交互元素，例如一个
<button id="picker">取色</button> - 确保脚本在
DOMContentLoaded后执行，或放在<body>底部 - 必须处理 Promise rejection，不同浏览器拒绝原因不同（权限拒绝、安全上下文不满足、无摄像头/屏幕共享权限等）
document.getElementById('picker').addEventListener('click', async () => {
try {
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // 如 "#ff5733"
} catch (err) {
console.error('取色失败:', err.name, err.message);
}
});
Chrome 与 Edge 支持但 Safari / Firefox 尚未实现
截至 2024 年中，EyeDropper 仅在 Chromium 内核浏览器（Chrome ≥ 113、Edge ≥ 113）中稳定可用。Safari 和 Firefox 明确暂不支持，调用会抛出 ReferenceError: EyeDropper is not defined。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 使用
typeof EyeDropper !== 'undefined'做特性检测，而非 UA 判断 - 降级方案可提供手动输入色值或 Canvas 像素读取（受限于跨域和 CORS）
- 不要依赖
navigator.userAgent判断，因为新版 Edge 也返回 Chromium UA，但旧版 Chrome 可能不支持
返回颜色值格式不稳定，需兼容处理
Chrome 当前返回 {sRGBHex: string}，但规范允许未来返回 {r, g, b, a}（线性浮点值）。实际项目中不能硬编码假设字段名。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先检查
result.sRGBHex，存在则直接使用 - 若不存在，尝试组合
result.r等字段生成十六进制（注意：r/g/b 是 0–1 浮点数，需乘以 255 并取整） - 避免直接解构
const { sRGBHex } = result，否则在字段缺失时会报undefined错误
容易被忽略的一点：即使在支持浏览器中，sRGBHex 也不保证是 6 位（可能带 alpha，如 "#ff5733ff"），CSS 使用时需确认是否接受 8 位格式。
