EyeDropper API

介绍

当前在网页上，创意应用开发者无法实现取色器工具，该工具允许用户从屏幕上的像素选择颜色，包括那些在请求颜色数据的网页之外渲染的像素。

本 API 使作者能够在自定义颜色选择器的构建中使用浏览器自带的取色器。

API 描述

ColorSelectionResult 字典

          dictionary ColorSelectionResult {
            DOMString sRGBHex;
          };

sRGBHex: 必须有一个值，该值是一个有效的简单颜色

ColorSelectionOptions 字典

          dictionary ColorSelectionOptions {
            AbortSignal signal;
          };

signal: 允许中止 {{EyeDropper/open}} 操作。

EyeDropper 接口

            [Exposed=Window, SecureContext]
            interface EyeDropper {
                constructor();
                Promise<ColorSelectionResult> open(optional ColorSelectionOptions options = {});
            };

open()

此方法必须遵循以下步骤：

如果 [=this=] 的 [=relevant global object=] 没有 [=transient activation=]，则返回一个被 "{{NotAllowedError}}" {{DOMException}} 拒绝的新 promise。
如果已经有其他 eyedropper 打开，则返回一个被 "{{InvalidStateError}}" {{DOMException}} 拒绝的新 promise。
令 |result| 为一个新 promise。
如果 options.signal 存在，则执行以下子步骤：
1. 如果 options.[=signal=] 已中止，则以 options.[=signal=] 的中止原因拒绝 |result|，并返回 |result|。
2. 添加以下中止步骤到 options.[=signal=]：
  1. 退出“取色器模式”并关闭 UI。
  2. 以 options.[=signal=] 的中止原因拒绝 |result|。
使网页进入“取色器模式”，此时用户输入被屏蔽：不会向网页分发 UI 事件。
[=In parallel=]：
1. 令 |colorSelectionResult| 为用户成功选择颜色的结果。如果失败则：
  1. 如果用户中止选择，则以 "{{AbortError}}" {{DOMException}} 拒绝 |result|；否则以 "{{OperationError}}" {{DOMException}} 拒绝 |result|。
  2. 中止这些步骤。
2. 退出“取色器模式”并关闭 UI。
3. 以 |colorSelectionResult| 解析 |result|。
返回 |result|。

EyeDropper

要 {{EyeDropper/open}} 一个 eyedropper，用户代理必须展示一个符合以下规则的用户界面：

如果展示用户界面失败或访问屏幕内容失败，则返回失败。
UI 必须确保在允许选择颜色之前已显示。
UI 必须明确显示将要被选择的颜色。
UI 必须提供取消/返回且不选择颜色的选项。

安全与隐私注意事项

暴露允许开发者访问用户机器上无限制像素数据的端点会带来安全挑战。特别是，任何 eyedropper 的实现都不应允许网页“屏幕抓取”用户未打算与网页应用分享的信息，例如用户在屏幕上移动鼠标时。

一种缓解这种威胁的方法是要求只有在用户采取某些明确动作（如按下鼠标按钮）时，像素数据才可被网页应用访问。

此外，浏览器应明确提示用户已进入 eyedropper 模式，例如更改光标，并提供用户退出该模式的方式，比如按下 ESC 键，并不允许作者取消该行为。

在允许用户选择颜色前，浏览器应确保用户有机会看到 UI。可以通过强制 eyedropper 打开到允许选择颜色之间的最小时间间隔来实现。

进入 eyedropper 模式应需要可消耗的用户激活，例如点击网页上的按钮，以避免无意泄露像素数据。

介绍