EyeDropper API 是 Chromium 浏览器（Chrome 94+等）支持的原生取色工具，用户点击屏幕任意位置即可返回 sRGB 十六进制颜色值（如 "#ff5733"），需 HTTPS/localhost 安全上下文及用户主动触发。
EyeDropper API 是 HTML5 提供的原生浏览器能力，允许网页直接调用系统级吸色器，点击屏幕任意位置获取该像素的 RGB 颜色值（返回 DOMString 格式如 "#ff5733"）。它无需权限弹窗、不依赖 canvas 截图或鼠标坐标计算，真正实现“所见即所得”的取色。
前提条件与兼容性
目前仅 Chromium 内核浏览器支持（Chrome 94+、Edge 94+、Opera 80+），Firefox 和 Safari 尚未实现。使用前需确保：
- 页面运行在安全上下文（HTTPS 或 localhost）
- 用户主动触发（如点击按钮），不能自动调用
- 浏览器版本满足最低要求（建议 Chrome ≥ 94）
基础用法：创建 EyeDropper 实例并打开吸色器
只需几行代码即可启动系统吸色器：
const eyeDropper = new EyeDropper();
<p>document.getElementById('pick-btn').addEventListener('click', async () => {
try {
const result = await eyeDropper.open();
console.log(result.sRGBHex); // 例如 "#4a90e2"
document.body.style.backgroundColor = result.sRGBHex;
} catch (err) {
console.error('吸色被取消或不可用', err);
}
});注意：调用 open() 后会立即全屏捕获鼠标，用户点击任意位置即返回颜色；若用户按 Esc 或点击右键取消，则 Promise 被 reject。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
返回值结构与颜色格式
result 是一个对象，目前只包含一个属性：
-
sRGBHex：标准六位十六进制颜色字符串（带 # 号），如"#ff6b6b"
它始终是 sRGB 空间下的近似值，不提供 RGBA、HSL 或原始像素坐标。如需其他格式，可自行转换：
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}实用增强技巧
让吸色体验更可靠、友好：
- 禁用多次并发调用：避免重复点击触发多个吸色器，可在调用前设标志位
- 降级处理：检测 API 是否可用，不可用时回退到基于 canvas 的模拟取色（如监听 mousemove + getPixelFromPoint）
-
视觉反馈：点击按钮后显示“正在取色…”提示，
open()成功后再清除 - 限制触发区域：虽无法限定吸色范围，但可在 UI 上引导用户仅在目标区域（如图片、画布）内点击
不复杂但容易忽略：它只返回颜色，不记录位置——如需坐标，需配合 pointerdown 事件手动捕获，但二者时间差可能导致偏差，不推荐混用。
