摘要：使用取色器 EyeDropper API 我們可以在屏幕上拾取顏色，就跟ps的吸管功能一樣。這是一個實驗性的API，從Chrome 95才開始支持的。我們就來試用一下。首先，還是要判斷一下瀏...
使用取色器 EyeDropper API 我們可以在屏幕上拾取顏色，就跟ps的吸管功能一樣。
這是一個實驗性的API，從Chrome 95才開始支持的。
我們就來試用一下。
首先，還是要判斷一下瀏覽器支不支持：
if ('EyeDropper' in window) {
console.log('取色器可以使用');
}使用時，先new一個 EyeDropper 對象，調用這個對象的open方法，就開始拾取顏色了，open方法返回的是一個promise對象，用戶在點擊屏幕拾取顏色后，會resolve，如果用戶按esc鍵退出，會reject：
const eyeDropper = new EyeDropper(); const result = await eyeDropper.open();
下面我們來寫一個最簡單的例子，在網頁中放一張圖片，和一個按鈕，點擊按鈕開始拾取顏色，用戶拾取顏色后，把顏色值打印出來：
<!DOCTYPE html>
<html>
<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="https://www.yzmask.com/uploads/202006/07/200607095436213.jpg" alt="" width="300" />
<button id="btn">開始取色</button>
<div>
取色后顯示：<span id="color"></span>
</div>
<script>
if ('EyeDropper' in window) {
const eyeDropper = new EyeDropper();
const btn = document.getElementById('btn');
btn.addEventListener('click', async () => {
try {
const result = await eyeDropper.open();
console.log(result);
const colorHexValue = result.sRGBHex;
document.querySelector('#color').innerHTML = result.sRGBHex;
} catch (e) {
console.log('用戶取消了取色');
}
})
}else{
alert('您的瀏覽器不支持EyeDropper取色器！');
}
</script>
</body>
</html>
