EyeDropperAPI

2021-11-05

Capbility

EyeDropper API

介绍

💡 The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers. EyeDropper 允许用户从 App 窗口或整个屏幕中提取色彩信息。

EyeDropper 在绝大部分文档、设计、创意类的软件中都有提供，然而 Web 一直缺失这方面的功能，许多创意类的 Web App 都很头疼。但现在 Google 的一项新提案将这个能力带到 Web 平台 ⇒ The EyeDropper API.

💡 EyeDropper API 是 Google PWA Capabilities Project 的一个项目，目的是扩充 Web Apps 的能力。Web apps should be able to do anything iOS/Android/desktop apps can.

其他软件中的 EyeDropper

Figma

Figma 的 EyeDropper 能够在当前画布上的任意像素中选取颜色

Keynote

Keynote 的 EyeDropper 能够从整个屏幕上的任意像素选取颜色

如何使用

Feature detection

确保特性在浏览器中启用

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

Get color value

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.
}

Abort Control

使用 AbortController API 控制色彩选择器

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();