【web前端】取色器 EyeDropper API

使用取色器 EyeDropper API我们可以在屏幕上拾取颜色，就跟ps的吸管功能一样。
这是一个实验性的API，从Chrome 95才开始支持的。
我们就来试用一下。
首先，还是要判断一下浏览器支不支持：

if ('EyeDropper' in window) {
  console.log('取色器可以使用')
}

我们在最新的Chrome中发现是可以使用这个API的，输出：

取色器可以使用

使用时，先new一个EyeDropper对象：

const eyeDropper = new EyeDropper()

调用这个对象的open方法，就开始拾取颜色了，open方法返回的是一个promise对象，用户在点击屏幕拾取颜色后，会resolve，如果用户按esc键退出，会reject：

const result = await eyeDropper.open()

下面我们来写一个最简单的例子，在网页中放一张图片，和一个按钮，点击按钮开始拾取颜色，用户拾取颜色后，把颜色值打印出来

  
    
    
    
    
  
  
    
    开始取色
    
  

在点击按钮后，鼠标变成拾取颜色的状态

随便点击图片上一点，就可以返回颜色了，

如果开始取色后，用户按下键盘的esc键，promise就会reject，就会打印catch中的内容了：

用户取消了取色

用起来还是很简单方便的，这个功能不仅可以在浏览器中取色，还可以点击屏幕中任何的位置。
由于现在还是实验阶段，所以支持的浏览器还是很少的。