快速点击！ 有一个名为 EyeDropper 的新 Web API
if ('EyeDropper' in window) {
const eyeDropper = new EyeDropper();
try {
// This has gotta be triggered by a user interaction,
// so consider this pseudo-code.
const result = await eyeDropper.open();
const colorHexValue = result.sRGBHex;
} catch (err) {
// The user escaped the eyedropper mode.
}
}- 这里有 一篇非常好的博客文章 介绍它。
- 它 目前仅在 Chrome 和朋友中可用。
- 我希望我更了解如何监控像这样的 API。 看起来它最初 来自 Edge，然后成为一个 社区组 的东西，这就是 草案规范 的地方，它经过了 公开审查，然后才发布 宣布（在 Chrome 中），现在它已上线。 看起来是一个好流程，但也表明 Chrome 可以真正通过这个流程一路狂飙，基本上完全由他们自己掌控。 其他浏览器实际上不必说一句话，它仍然可以发布。 感情复杂，但总体上是积极的，特别是因为这只是一个很小的额外功能，而不是我认为对任何 Web 应用程序都至关重要的东西。
- 您可以从整个屏幕上的任何位置选择颜色，这很棒。 它将改进像 Figma 这样的工具，Figma 有一个颜色选择器，但目前仅限于在画布上选择颜色。
- 它已经在生产应用程序中使用，例如 Slides.com 和 Polypane，改善了 UX。（来自 Bramus）
- 有 一个 Chrome 扩展。（同样来自 Bramus）
- 但嘿，也许 一个书签 也一样容易。
- 当你执行
<input type="color">时，该 UI 弹出窗口（平台提供）颜色选择器也在其中（至少在 macOS 上），所以一直都有它。 这让我想，无论你在哪里使用<input type="color">，都有意义的是也提供一个渐进增强按钮，就在它旁边，直接跳转到颜色选择器。 主题标签免费 Web 组件想法。