眼睛Droppin＆＃039;

Chrome浏览器及相关浏览器新增了名为EyeDropper的网页API，让网页开发者可以轻松获取屏幕上任意位置的颜色值。

以下代码片段展示了如何使用该API：

 if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  try {
    // 此处需要用户交互触发const result = await eyeDropper.open();
    const colorHexValue = result.sRGBHex;
  } catch (err) {
    // 用户取消颜色拾取}
}

该API目前仅支持Chrome及相关浏览器。其开发过程始于Edge浏览器，后经社区组讨论和公开审核，最终在Chrome浏览器中上线。虽然Chrome在这一过程中扮演了主导角色，但总体而言，这是一个积极的案例，尤其考虑到EyeDropper是一个相对次要的功能。

EyeDropper API 的优势在于可以从整个屏幕拾取颜色，这将显着提升诸如Figma等设计工具的用户体验，弥补其颜色拾取器仅限于画布内的不足。 Slides.com和Polypane等应用已将该API应用于生产环境，提升了用户体验。此外，也已出现相应的Chrome扩展程序和bookmarklet。

建议在使用EyeDropper API的同时，提供一个可访问的系统颜色选择器按钮，以增强用户体验，并实现渐进式增强。 这可以作为一个独立的Web组件开发。

以上是眼睛Droppin＆＃039;的详细内容。更多信息请关注PHP中文网其他相关文章！