使用取色器 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()
下面我们来写一个最简单的例子，在网页中放一张图片，和一个按钮，点击按钮开始拾取颜色，用户拾取颜色后，把颜色值打印出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>取色器 EyeDropper API</title>
</head>
<body>
<img src="./laopo.jpg" alt="" width="100" />
<button id="btn">开始取色</button>
<script>
if ('EyeDropper' in window) {
console.log('取色器可以使用')
const eyeDropper = new EyeDropper() // 初始化一个EyeDropper对象
const btn = document.getElementById('btn')
btn.addEventListener('click', async () => { // 监听按钮的点击事件
try {
const result = await eyeDropper.open() // 开始拾取颜色
console.log(result)
const colorHexValue = result.sRGBHex
console.log(colorHexValue) // 打印出颜色的值
} catch (e) {
console.log('用户取消了取色')
}
})
}
</script>
</body>
</html>
在点击按钮后，鼠标变成拾取颜色的状态
随便点击图片上一点，就可以返回颜色了，
如果开始取色后，用户按下键盘的esc键，promise就会reject，就会打印catch中的内容了：
用户取消了取色
用起来还是很简单方便的，这个功能不仅可以在浏览器中取色，还可以点击屏幕中任何的位置。
由于现在还是实验阶段，所以支持的浏览器还是很少的。
网友评论