如何创建具有额外功能（例如从屏幕选择颜色）的颜色选择器

Question

我有一个使用react-color创建的颜色选择器（https://casesandberg.github.io/react-color/）。现在我想要额外的功能，比如它还应该能够从屏幕上选择颜色（切换颜色选择器）。 我发现很少有可用的库，但看起来它只能通过检查元素工作，但不确定我是否正确。

我想要的：

我目前拥有的（使用react-color库完成）

任何人都可以指导我如何添加从屏幕选择颜色的额外功能到现有的颜色选择器（这是使用反应颜色库完成的）。

Answer 1

你试过吗

<input type="color" />

？

<input type="color" />

Answer 2

您正在寻找的是 EyeDropper API。 目前（2023 年）仅受 Chromium 浏览器（Chrome、Edge、Opera）支持。 对于其他浏览器，以下是“请求位置”问题：

• 火狐
• Safari

目前两者都开放（他们还没有决定任何事情）。

---

实施示例

（显然这仅适用于支持的浏览器）

async function sampleColor() {
  if('EyeDropper' in window) {
    const ed = new EyeDropper();
    const color = await ed.open();
    if(color) {
      setColorSwatch(color.sRGBHex)
    }
  }
}

function setColorSwatch(rgb) {
  document.getElementById('swatch').style.backgroundColor = rgb;
}

#swatch {
  border: 1px solid black;
  width: 48px;
  height: 48px;
  margin: 1rem 0;
}

<button onclick="sampleColor()">Pippette icon</button>

<div id="swatch"></div>