使用取色器 EyeDropper API我們可以在屏幕上拾取顏色，就跟ps的吸管功能一樣。
這是一個(gè)實(shí)驗(yàn)性的API，從Chrome 95才開(kāi)始支持的。
我們就來(lái)試用一下。
首先，還是要判斷一下瀏覽器支不支持：
if ('EyeDropper' in window) {
console.log('取色器可以使用')
}
我們?cè)谧钚碌腃hrome中發(fā)現(xiàn)是可以使用這個(gè)API的，輸出：
取色器可以使用
使用時(shí)，先new一個(gè)EyeDropper對(duì)象：
const eyeDropper = new EyeDropper()
調(diào)用這個(gè)對(duì)象的open方法，就開(kāi)始拾取顏色了，open方法返回的是一個(gè)promise對(duì)象，用戶在點(diǎn)擊屏幕拾取顏色后，會(huì)resolve，如果用戶按esc鍵退出，會(huì)reject：
const result = await eyeDropper.open()
下面我們來(lái)寫(xiě)一個(gè)最簡(jiǎn)單的例子，在網(wǎng)頁(yè)中放一張圖片，和一個(gè)按鈕，點(diǎn)擊按鈕開(kāi)始拾取顏色，用戶拾取顏色后，把顏色值打印出來(lái)
<!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">開(kāi)始取色</button>
<script>
if ('EyeDropper' in window) {
console.log('取色器可以使用')
const eyeDropper = new EyeDropper() // 初始化一個(gè)EyeDropper對(duì)象
const btn = document.getElementById('btn')
btn.addEventListener('click', async () => { // 監(jiān)聽(tīng)按鈕的點(diǎn)擊事件
try {
const result = await eyeDropper.open() // 開(kāi)始拾取顏色
console.log(result)
const colorHexValue = result.sRGBHex
console.log(colorHexValue) // 打印出顏色的值
} catch (e) {
console.log('用戶取消了取色')
}
})
}
</script>
</body>
</html>
在點(diǎn)擊按鈕后，鼠標(biāo)變成拾取顏色的狀態(tài)
隨便點(diǎn)擊圖片上一點(diǎn)，就可以返回顏色了，
如果開(kāi)始取色后，用戶按下鍵盤(pán)的esc鍵，promise就會(huì)reject，就會(huì)打印catch中的內(nèi)容了：
用戶取消了取色
用起來(lái)還是很簡(jiǎn)單方便的，這個(gè)功能不僅可以在瀏覽器中取色，還可以點(diǎn)擊屏幕中任何的位置。
由于現(xiàn)在還是實(shí)驗(yàn)階段，所以支持的瀏覽器還是很少的。
