🚀3行代码，实现一个取色器🚀

前言

今天发现了一个很好玩的 API ——EyeDropper。

EyeDropper API 提供了一种创建拾色器工具的机制。使用该工具，用户可以从屏幕上取样颜色，包括浏览器窗口之外的区域。

这是 MDN 上对它的介绍，可以取包括浏览器窗口之外的区域。我们一起看看是怎么个事

什么是取色器

取色器，可能有一些地方会被称为拾色器。它指的是一种从应用窗口的某些部分甚至整个屏幕中选择颜色的工具。

我不知道各位有没有遇到过这种情况：产品/业务随便丢过来一张图，让我们把页面抄成这个样子，但是图里的各个元素是什么颜色呀？这个时候他们可能就会让你去找一个取色器自己取一下看看，听起来很离谱，但是我遇到过。这也是取色器的一种使用场景吧。

在取色器打开时，会出现一个类似放大镜的效果。移动到希望取色的位置时，鼠标左键点下，就可以获取到当前坐标的一个颜色。当然你也可以通过 Esc 键提前退出取色器模式。

input

其实在这个 API 出现之前，浏览器已经有一种取色器的解决方案，那就是 input 标签。我们可以通过这样一行代码来实现一个取色器

<input type="color"/>

在点击这个画笔的时候，我们就可以使用一个取色器。但是如果采用这种方式来开发一个取色器的应用，还是得重新定义覆盖它的 CSS 样式。

EyeDropper

这个时候就出现了EyeDropper这个 API ，它支持我们像调用一个函数一样唤起一个取色器。

  <Button
    onClick={async () => {
      if (!"EyeDropper" in window) {
        message.error("你的浏览器不支持EyeDropper");
        return;
      }
      const eyeDropper = new EyeDropper();
      const abortController = new AbortController();
      try {
        const result = await eyeDropper.open({
          signal: abortController.signal,
        });
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }}
  >
    打开取色器
  </Button>

输出也很简单：

{
    "sRGBHex": "#dc362e"
}

sRGBHex 就是我们取到的颜色，上面的核心代码也就三行，所以三行拉起一个取色器是可以实现的（🐶：

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();
  const result = await eyeDropper.open({signal: abortController.signal});

再来看一下兼容性：

看起来就是一些比较新的浏览器才支持，只能说任重道远吧。。。

其次，我们也需要关注下面的一些安全和用户隐私相关的问题：

1. 首先这个 API 一定要有用户的交互才能唤起，比如说点击事件。如果你想一进来就通过这种方式唤起试色器，浏览器不会有任何响应。
2. 其次，唤起了取色器之后，在用户点击像素之前，移动“放大器”扫描过的区域像素信息是不会被返回和记录的。
3. 用户可以通过 Esc 键随时退出取色器模式。

最后

以上就是本文的全部内容，介绍了一种唤起取色器的 API 。我也是第一次见到这个 API ，确实挺有意思的。

如果你觉得有意思的话，点点关注点点赞吧～