如何让颜色选择器开始拾取功能？

Question

我有一个用 Vue 3 和 tailwind 编码的颜色选择器

<input id="colorPickerBtn" type="color" class="opacity-0 absolute">

当我打开它时，它会打开默认的浏览器颜色选择弹出窗口

我希望它在颜色选择功能中初始化（屏幕截图中突出显示的功能），有一种方法可以做到这一点（请随意在常规 JS 中解释一下）？

Answer 1

我认为您指的是某些浏览器内置的吸管功能。 Chrome 这里有一些文档：https://developer.chrome.com/docs/capability/web-apis/eyedropper

作为警告，它仅在 Chrome 和 Edge 浏览器中受支持。如果你想走这条路，你也许可以像这样实现它：

<button id="colorPickerButton">

...

let chosenColor 

document.getElementById('colorPickerButton').addEventListener('click', (event)=>
    chosenColor = await startEyeDropper()
})
async function startEyeDropper() {
    if (('EyeDropper' in window)) {
        const eyeDropper = new EyeDropper();
        try {
          const result = await eyeDropper.open();
          return result.sRGBHex;
        } catch (e) {
          return null;
        }
    } else {
        alert('eyedropper not supported')
    }  
  }

我的另一个想法是，既然你已经在使用 Vue，你可以尝试使用像

https://www.npmjs.com/package/vue-eye-dropper 这样的库来实现吸管器，这可能会有更好的交叉-无论如何，浏览器支持。