EyeDropper

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全上下文: 此项功能仅在一些支持的浏览器安全上下文(HTTPS)中可用。

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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

构造函数

EyeDropper() 实验性

返回一个新的 EyeDropper 实例。

实例方法

EyeDropper 接口不继承任何方法

EyeDropper.open() 实验性

返回一个 Promise,该 Promise 会兑现一个可以访问所选颜色的对象。

示例

打开拾色器工具并进行颜色采样

以下示例演示如何打开拾色器工具,并等待用户选择屏幕上的像素,或按下 Escape 键取消拾色器模式。

HTML

html
<button id="start-button">打开拾色器</button> <span id="result"></span>

JavaScript

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

  if (!window.EyeDropper) {
    resultElement.textContent = "你的浏览器不支持 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">打开拾色器</button> <span id="result"></span>

JavaScript

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

  if (!window.EyeDropper) {
    resultElement.textContent = "你的浏览器不支持 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);
});

结果

规范

Specification
EyeDropper API
# eyedropper-interface

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
EyeDropper
Experimental
EyeDropper() constructor
Experimental
open
Experimental
Secure context required
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.