JavaScript 滴管工具 選取螢幕顏色 eyeDropper

在網頁中要選取顏色可以使用滴管(EyeDropper)功能，可以讓使用者透過點選螢幕上的顏色來選擇色碼，會產生如下圓圈的選取工具，會跟隨並放大游標，顯示游標中心點的顏色：

建立一個呼叫滴管工具的按鈕

    
<button id="pickColorButton">使用滴管工具選取顏色</button>
    

程式碼：

    

// 檢查瀏覽器是否支援 EyeDropper API
if (!window.EyeDropper) {
    console.log('瀏覽器不支援 EyeDropper API');
} else {
    const eyeDropper = new EyeDropper();

    // 綁定按鈕事件來觸發顏色選取
    document.getElementById('pickColorButton').addEventListener('click', async () => {
        try {
            // 開啟滴管工具並等待使用者選取顏色
            const result = await eyeDropper.open();
            console.log('選取的顏色:', result.sRGBHex); // 顯示選取的顏色，格式為 sRGBHex

        } catch (e) {
            console.error('選擇顏色失敗:', e);
        }
    });
}
    

參考資料：
mdn - EyeDropper