EyeDropper API 浏览器支持

EyeDropper API —— 根据 Chrome for Developers，EyeDropper API“让作者在构建自定义 调色器时使用浏览器提供的取色器”，页面因此可以取到屏幕上某个像素的颜色，而无需自行 实现取色逻辑。

浏览器与生态支持

• 图例
• 支持
• 部分支持
• 需开启标志
• 不支持
• 未知

浏览器 / 平台	支持	版本	置信度	来源	备注
Chrome (Desktop)	支持	95	高	来源	12
Chrome (Android)	不支持	—	高	来源	3
Edge (Desktop)	支持	95	高	来源	456
Firefox (Desktop)	不支持	—	高	来源	7
Firefox (Android)	不支持	—	高	来源	89
Safari (macOS)	不支持	—	高	来源	10
Safari (iOS)	不支持	—	高	来源	1112
Samsung Internet	不支持	—	高	来源	1314
WebView (Android)	不支持	—	高	来源	15

1. Chrome 120 之前，EyeDropper API 在 ChromeOS 上不可用。见 bug 40720753（https://crbug.com/40720753）。
2. 在 Linux X11 上可用，在 Linux Wayland 上不可用。见 bug 40720753（https://crbug.com/40720753）。
3. browser-compat-data 未记录 Chrome Android 的支持。
4. Chrome 120 之前，EyeDropper API 在 ChromeOS 上不可用。见 bug 40720753（https://crbug.com/40720753）。
5. 在 Linux X11 上可用，在 Linux Wayland 上不可用。见 bug 40720753（https://crbug.com/40720753）。
6. 由 browser-compat-data 镜像自 Chrome 的数据推导。
7. browser-compat-data 未记录 Firefox 的支持。
8. browser-compat-data 未记录 Firefox for Android 的支持。
9. 由 browser-compat-data 镜像自 Firefox 的数据推导。
10. browser-compat-data 未记录 Safari 的支持。
11. browser-compat-data 未记录 iOS 版 Safari 的支持。
12. 由 browser-compat-data 镜像自 Safari 的数据推导。
13. browser-compat-data 未记录 Samsung Internet 的支持。
14. 由 browser-compat-data 镜像自 Chrome Android 的数据推导。
15. 实现跟踪：https://crbug.com/40791573。

源数据: /compatibility/eyedropper.json · 全球使用占比: 37 % (StatCounter 2026-05)

来源: 规范 · MDN · 最近核验 2026-10-03 · 置信度: 高 (由来源计算)

如何使用

根据 Chrome for Developers，open()“只能在响应用户操作（例如点击按钮）时调用”， 因此该调用应当写在点击处理函数内部。用户选中像素后它会兑现，并给出该像素的 sRGBHex 格式颜色：

// 最小可运行示例：先创建处理函数所需的控件，再绑定事件。
const pickButton = document.createElement('button');
pickButton.type = 'button';
pickButton.textContent = '取色';
const colorInput = document.createElement('input');
colorInput.type = 'color';
document.body.append(pickButton, colorInput);

pickButton.addEventListener('click', async () => {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open();
    colorInput.value = result.sRGBHex; // 例如 "#3366ff"
  } catch (err) {
    // 根据 MDN，AbortError 表示用户按下 Escape，或 AbortController 中止了选择。
    if (err.name === 'AbortError') {
      console.log('取色选择已中止。');
    } else {
      console.error('取色失败：', err.name, err);
    }
  }
});

如何在运行时检测

在未实现该 API 的浏览器中 'EyeDropper' in window 为 false。下面的回退分支会真正 显示 <input type="color"> 色块来替代取色按钮：

function initColorPicker(pickButton, colorInput) {
  if (!('EyeDropper' in window)) {
    // 此处没有原生取色器——隐藏取色按钮，改用始终存在的
    // <input type="color"> 色块让用户选色。
    pickButton.hidden = true;
    colorInput.hidden = false;
    return;
  }
  pickButton.hidden = false;
  pickButton.addEventListener('click', async () => {
    const eyeDropper = new EyeDropper();
    try {
      const { sRGBHex } = await eyeDropper.open();
      colorInput.value = sRGBHex;
    } catch (err) {
      // 用户按下 Escape 或 AbortController 中止选择时都会出现 AbortError。
      if (err.name === 'AbortError') {
        console.log('取色选择已中止。');
      } else if (err.name === 'NotAllowedError') {
        // open() 未在临时用户激活（transient user activation）中调用。
        console.error('取色器需要一次新的用户手势。');
      } else if (err.name === 'InvalidStateError') {
        // 已经有另一个取色器处于打开状态。
        console.error('已有取色器处于打开状态。');
      } else {
        // OperationError：因其他原因取色失败。
        console.error('取色失败：', err.name, err);
      }
    }
  });
}

实践清单

• 根据 MDN，EyeDropper API“不属于 Baseline，因为它在部分使用最广泛的浏览器中无法工作” ——构造之前务必做特性检测。
• 只在用户手势处理函数内调用 open()——根据 Chrome for Developers，它“只能在响应用户 操作（例如点击按钮）时调用”。
• 按 name 区分 open() 的拒绝原因：根据 MDN，用户按下 Escape 中止选择，或 AbortController 中止选择时，都会出现 AbortError。NotAllowedError 表示调用缺少 临时用户激活，InvalidStateError 表示已有另一个取色器打开，OperationError 表示 因其他原因取色失败。
• open() 接受 AbortSignal，因此在取色器所在对话框被关闭时，也可以用程序取消正在 进行的取色。
• 根据 MDN browser-compat-data，Chrome for Android 未实现该 API，因此以移动端为主的 调色功能完全不能依赖它。
• 桌面端的支持并非各平台一致：根据 MDN browser-compat-data，该 API“在 Linux X11 可用， 但在 Linux Wayland 不可用”，且“在 Chrome 120 之前，EyeDropper API 在 ChromeOS 上不 可用”。因此不要假设桌面端 Chromium 一定能取色，要让 <input type="color"> 回退在任何 环境下都可达。

下一步

完整参考（构造函数、open() 选项、取消机制）见 EyeDropper API。

另见 Async Clipboard API——编辑器类 Web 应用常用的 另一项 Chromium 先行能力。

← 返回兼容性浏览器。