不常用的浏览器 API — EyeDropper

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

本文要介绍的不常用的 API 是 EyeDropper，这也是一个较新版本浏览器才支持的 API，因此了解的人也很少，接下来依旧从功能和使用两个方面看一下这个 API。

功能

EyeDropper 中文翻译是滴管，从名字上不太容易猜到它是做什么的，但是可以回忆一下，你有没有用过图标为滴管的工具？是不是很熟悉，取色器类的工具图标通常就是一个滴管，因此这个 EyeDropper API 就是用来在浏览器中实现取色器的 API。

注意这个 API 不只可以从浏览器页面中取色，调用这个 API 是可以创建一个系统级别的取色器，使用它也可以从电脑上浏览器之外的部分取色。由于涉及到用户系统级访问，因此这个 API 需要在 安全上下文运行，并且只能通过用户事件来调用，不能不经过用户操作直接调用 API。

使用

接下来看一下使用，在 window 下面有 EyeDropper 构造函数，我们首先需要创建一个实例，这个实例下面有一个 open 方法，调用 open 就可以打开一个取色器：

const eyeDropper = new EyeDropper();
eyeDropper.open().then(result => {
	console.log(result.sRGBHex);
});

open 返回的是一个 Promise，此时用户鼠标光标会变成取色工具，点击取色后 Promise 会 resolve 取得的色值，通过键盘 Esc 可以停止取色，这时 Promise 会 reject。

除了使用 Esc，有时我们可能需要通过程序控制停止取色，open 函数支持传入一个 AbortController 对象来处理这个场景：

const eyeDropper = new EyeDropper();
const abortController = new AbortController();
eyeDropper.open({ signal: abortController.signal }).then(result => {
	console.log(result.sRGBHex);
});
setTimeout(() => {
	abortController.abort();
}, 2000);

这个例子中 2 秒超时就会 reject 终止取色流程，但是我在自己设备测试时虽然 Promise 已经结束，但是用户光标并没有恢复正常状态，还是要在用户点击后才会恢复。