本文档描述了提供访问浏览器提供的取色器的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()
该方法必须遵循以下步骤：
  1. 如果 [=this=] 的 [=相关全局对象=] 没有 [=短暂激活=]，则返回 [=一个被拒绝的新promise=]，并附带 "{{NotAllowedError}}" {{DOMException}}。
  2. 如果另一个取色器已经打开，则返回 [=一个被拒绝的新promise=]，并附带 "{{InvalidStateError}}" {{DOMException}}。
  3. 让 |result| 成为 [=一个新的promise=]。
  4. 如果 options.signal 存在，则执行以下子步骤：
    1. 如果 options.[=signal=] 被 中止， 则 [=拒绝=] |result| 并附带 options.[=signal=] 的 中止原因，并返回 |result|。
    2. 将以下中止步骤 添加到 options.[=signal=]：
      1. 退出“取色器模式”并关闭UI。
      2. [=拒绝=] |result| 并附带 options.[=signal=] 的 中止原因。
  5. 将网页置于“取色器模式”，此时用户输入将被抑制：不向网页发送UI事件。
  6. [=并行=]：
    1. 让 |colorSelectionResult| 成为用户成功选择颜色的结果。如果失败，则：
      1. 如果用户取消选择，[=拒绝=] |result| 并附带 "{{AbortError}}" {{DOMException}}，否则 [=拒绝=] |result| 并附带 "{{OperationError}}" {{DOMException}}。
      2. 中止这些步骤。
    2. 退出“取色器模式”并关闭UI。
    3. [=解决=] |result| 并附带 |colorSelectionResult|。
  7. 返回 |result|。

EyeDropper

为了 {{EyeDropper/open}} 一个取色器，用户代理必须呈现符合以下规则的用户界面：

安全性和隐私考虑

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

减轻这种威胁的一种方法是要求在用户采取某些明确的操作（如按下鼠标按钮）时才将像素数据提供给网页应用程序。

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

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

进入取色器模式的过渡应要求可消耗的用户激活，例如点击网页上的按钮，以帮助避免无意间暴露像素数据。

示例

平台支持

选择颜色