怎么使用HTML5中EyeDropperAPI调用原生吸色器获取屏幕任意像素色值-H5教程-PHP中文网

EyeDropper API 是 Chromium 浏览器（Chrome 94+等）支持的原生取色工具，用户点击屏幕任意位置即可返回 sRGB 十六进制颜色值（如 "#ff5733"），需 HTTPS/localhost 安全上下文及用户主动触发。

怎么使用html5中eyedropperapi调用原生吸色器获取屏幕任意像素色值

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);
}
});</p>

注意：调用 open() 后会立即全屏捕获鼠标，用户点击任意位置即返回颜色；若用户按 Esc 或点击右键取消，则 Promise 被 reject。

返回值结构与颜色格式

result 是一个对象，目前只包含一个属性：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

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 };
}