EyeDropper API 是 Chromium 浏览器（Chrome 97+等）支持的原生颜色拾取工具，需 HTTPS/localhost 环境，调用 open() 返回 sRGBHex 值，须 try/catch 捕获取消异常。
EyeDropper API 是 HTML5 提供的原生颜色拾取工具，允许用户从网页任意位置（包括其他窗口、桌面背景、甚至视频帧）实时选取颜色。它不依赖 Canvas 或截图权限，使用简单且体验原生。
启用 EyeDropper 前的必要检查
该 API 目前仅在 Chromium 内核浏览器（Chrome 97+、Edge 97+、Opera 83+）中支持，且必须运行在安全上下文（HTTPS 或 localhost）。Safari 和 Firefox 尚未实现。
使用前建议检测兼容性：
if ('EyeDropper' in window) {
// 可以安全使用
} else {
alert('当前浏览器不支持 EyeDropper API');
}
基础用法：打开拾色器并获取颜色值
调用 new EyeDropper().open() 会弹出系统级拾色光标，用户点击后返回一个包含 sRGBHex 字段的对象（如 { sRGBHex: "#4a90e2" }）。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 返回的颜色始终为标准 6 位十六进制格式（
#RRGGBB），不含透明度 - 调用是异步的，需用
await或.then()处理结果 - 用户取消操作（按 Esc 或点击取消）会抛出异常，应主动捕获
示例代码：
const button = document.getElementById('pick-color');
button.addEventListener('click', async () => {
try {
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // e.g. "#ff5733"
// 可赋值给 input、更新预览块、复制到剪贴板等
} catch (err) {
console.log('用户取消了拾色操作');
}
});
拾色后自动复制颜色值到剪贴板
结合 navigator.clipboard.writeText()，可在拾色完成后一键复制 HEX 值：
- 确保页面已获得剪贴板写入权限（通常点击触发即可）
- 复制成功后可给出视觉反馈（如 toast 提示）
- 避免在未捕获异常时直接调用 clipboard，否则失败无提示
完整集成示例：
async function pickAndCopy() {
if (!('EyeDropper' in window)) return;
try {
const { sRGBHex } = await new EyeDropper().open();
await navigator.clipboard.writeText(sRGBHex);
showFeedback(`已复制 ${sRGBHex}`);
} catch (err) {
showFeedback('拾色已取消');
}
}
function showFeedback(text) {
const tip = document.createElement('div');
tip.textContent = text;
tip.style.cssText = 'position:fixed;top:20px;right:20px;background:#333;color:#fff;padding:8px 16px;border-radius:4px;z-index:1000;';
document.body.appendChild(tip);
setTimeout(() => tip.remove(), 2000);
}
注意事项与实用建议
EyeDropper 是一次性操作——每次调用都开启新拾色流程，无法持续跟踪鼠标移动颜色。若需“吸管模式”，需自行封装多次调用逻辑（但注意防抖和用户体验）。
- 不能用于跨域 iframe 内容（受同源策略限制）
- 拾色结果不含 Alpha 通道，如需 RGBA，需额外通过 Canvas 获取像素或估算透明度
- 移动端暂不支持（无对应系统级拾色器）
- 按钮文案建议明确，如“点击拾色”而非“选择颜色”，降低用户理解成本
不复杂但容易忽略：务必包裹 try/catch，否则用户取消会导致未处理 promise rejection 报错。
