吸管

有限可用性

此功能不是基线功能，因为它在一些最常用的浏览器中不起作用。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

实验性：这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

EyeDropper 接口表示吸管工具的一个实例，用户可以打开并使用它从屏幕上选择颜色。

构造函数

EyeDropper()

返回一个新的 EyeDropper 实例。

实例方法

EyeDropper 接口不继承任何方法.

EyeDropper.open()

返回一个 promise，该 promise 解析为一个对象，该对象提供对所选颜色的访问权限。

示例

打开吸管工具并采样颜色

此示例演示如何打开吸管工具并等待用户从屏幕上选择一个像素，或者按 Escape 取消吸管模式。

HTML

html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>

JavaScript

js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});

结果

取消吸管模式

此示例表明，吸管模式也可以在用户选择颜色或按 Escape 之前取消。

HTML

html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>

JavaScript

js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});

结果

规范

规范
吸管 API
# eyedropper-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。