此页面由 Cloud Translation API 翻译。

使用 EyeDropper API 选择屏幕上任何像素的颜色

借助 EyeDropper API，作者可以在构建自定义颜色选择器时使用浏览器提供的取色器。

Patrick Brosset

Thomas Steiner

什么是 EyeDropper API？

许多富有创意的应用允许用户从应用窗口的某些部分甚至是应用窗口的各部分选择颜色，通常使用取色器比喻。

例如，Photoshop 可让用户从画布上采样颜色，因此无需猜测颜色可能会出错PowerPoint 还有一个取色器在设置形状的轮廓或填充颜色时很有用。甚至 Chromium 开发者工具中也有取色器，这样您就不必记住或复制颜色代码。

如果您正在利用网络技术构建广告素材应用，则可能需要提供类似的并为用户提供贴心实用的功能不过，要尽可能在网上做这件事非常困难，尤其是在想要对整个设备屏幕（例如，其他应用）中的颜色进行采样而不只是从当前的浏览器标签页中打开没有浏览器提供的取色器工具供应用自己使用。

<input type="color"> 元素。对于在桌面设备上运行且基于 Chromium 的浏览器，它提供了一种实用的功能，颜色选择器下拉菜单中的取色器。不过，如果使用这种方式，您的应用将不得不自定义并将其与 CSS 结合使用，并将其封装在一些 JavaScript 中，以供应用的其他部分使用。如果使用此选项，还意味着其他浏览器将无法使用该功能。

EyeDropper API 提供一种从屏幕中采样颜色的方法，从而填补了这一空白。

Chromium 颜色选择器。

如何使用 EyeDropper API

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

功能检测和浏览器支持

首先，请确保 API 可用，然后再使用。

if ('EyeDropper' in window) {
  // The API is available!
}

自即日起，基于 Chromium 的浏览器（例如 Edge 或 Chrome）支持 EyeDropper API 95 版。

使用此 API

如需使用 API，请创建一个 EyeDropper 对象，然后调用其 open() 方法。

const eyeDropper = new EyeDropper();

open() 方法将返回一个 promise，该 promise 会在用户在屏幕，而解析值可让您访问 sRGBHex 格式 (#RRGGBB) 的像素颜色。如果用户按 Esc 键退出取色器模式，则 promise 会被拒绝。

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

应用的代码也可以取消取色器模式。如果应用的状态是做出重大更改。系统可能会显示一个弹出对话框并要求用户输入。通过此时应停止取色器模式。

要取消取色器，您可以使用 AbortController 对象的信号和将其传递给 open() 方法。

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

综上所述，您可以在下面找到一个可重复使用的异步函数：

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

试试看！

使用 Microsoft Edge 或 Google Chrome 95 或更高版本，在 Windows 或 Mac 上，打开一个 EyeDropper 演示。

尝试彩色游戏演示实例。点击 Play 按钮，然后在有限的时间内尝试从与顶部的彩色方块相匹配的列表。

Color 游戏演示。

隐私权和安全注意事项

这个看似简单的 Web API 背后隐藏着潜在的有害隐私和安全问题。内容如果恶意网站开始从您的屏幕上看到像素，该怎么办？

为解决此问题，API 规范要求采取以下措施：

首先，API 不会在未经用户意图的情况下实际让取色器模式启动。open() 方法只有在响应用户操作（如点击按钮）时才能调用。
其次，如果没有用户意图，则无法检索到任何像素信息。promise 返回 open() 仅在响应用户操作（点击像素）时解析为颜色值。因此，不得在用户不注意的情况下在后台使用取色器。
为帮助用户轻松注意到取色器模式，浏览器必须清楚显示取色器模式。这就是普通鼠标光标会在短暂延迟后消失的原因，也是专用界面。此外，从取色器模式启动到用户可以选择某个像素，以确保用户有足够的时间看到放大镜。
最后，用户可以随时取消取色器模式（方法是按 Esc 键）键）。

反馈

Chromium 团队希望了解您使用 EyeDropper API 的体验。

向我们介绍 API 设计

API 是否有什么无法按预期运行？或者是否缺少方法需要哪些资源或属性来实现您的想法？对安全性有疑问或意见模型？在 API 的 GitHub 代码库中提交规范问题，或者将您的想法添加到现有问题。

报告实现存在的问题

您是否发现了 Chromium 实现方面的错误？或者，实现是否与规范不同？在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息简单的重现说明，并在组件框中输入 Blink>Forms>Color。 Glitch 非常适用于分享轻松快速的重现问题。

表示对 API 的支持

您打算使用 EyeDropper API 吗？您的公开支持可帮助 Chromium 团队确定各项工作的轻重缓急并向其他浏览器供应商展示支持这些功能有多么重要。发推文给 @ChromiumDev（使用 # 标签） #EyeDropper，然后让我们都会知道您在何处使用它

实用链接

致谢

EyeDropper API 由 Microsoft Edge 团队的 Ionel Popescu。这篇帖子由 Joe Medley 审核。