使用 EyeDropper API 挑選螢幕上任何像素的顏色

作者可透過 EyeDropper API，在建構自訂顏色挑選器時使用瀏覽器提供的滴管。

Patrick Brosset

Thomas Steiner

什麼是 EyeDropper API？

許多創意應用程式都允許使用者從應用程式視窗的各個部分，甚至是整個畫面中挑選顏色，通常是使用滴管隱喻。

舉例來說，Photoshop 可讓使用者從畫布取樣顏色，不必猜測顏色，以免出錯。PowerPoint 也提供滴管工具，方便您設定形狀的輪廓或填滿顏色。即使是 Chromium 開發人員工具，在 CSS 樣式面板中編輯顏色時，也有滴管工具可供使用，因此您不必記住或從其他地方複製顏色代碼。

如果您要使用網頁技術建構創意應用程式，可能需要為使用者提供類似功能。不過，在網頁上執行這項操作很困難 (如果可以的話)，特別是當您想從整個裝置螢幕取樣顏色 (例如從其他應用程式)，而不只是從目前的瀏覽器分頁時。瀏覽器沒有提供滴管工具，因此網路應用程式無法自行使用。

<input type="color"> 元素即將推出。在電腦裝置上執行的 Chromium 架構瀏覽器中，色彩挑選器下拉式選單會提供實用的滴管工具。不過，使用這項功能表示應用程式必須透過 CSS 自訂，並以少許 JavaScript 包裝，才能供應用程式的其他部分使用。選擇這個選項也表示其他瀏覽器無法存取這項功能。

EyeDropper API 可從螢幕取樣顏色，填補這項缺口。

Chromium 顏色挑選器。

如何使用 EyeDropper API

瀏覽器支援

Browser Support

Source

功能偵測和瀏覽器支援

首先，請確認 API 是否適用。

if ('EyeDropper' in window) {
  // The API is available!
}

自 95 版起，Edge 或 Chrome 等以 Chromium 為基礎的瀏覽器都支援 EyeDropper API。

使用 API

如要使用 API，請建立 EyeDropper 物件，然後呼叫其 open() 方法。

const eyeDropper = new EyeDropper();

使用者在畫面上選取像素後，open() 方法會傳回已解決的 Promise，而解決的值會以 sRGBHex 格式 (#RRGGBB) 提供像素的顏色存取權。如果使用者按下 esc 鍵離開滴管模式，系統會拒絕 Promise。

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

應用程式的程式碼也可以取消滴管模式。如果應用程式的狀態大幅變更，這項功能就非常實用。系統可能會顯示彈出式對話方塊，要求使用者輸入內容。此時應停止使用滴管模式。

如要取消滴管，可以使用 AbortController 物件的訊號，並將其傳遞至 open() 方法。

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

綜合以上內容，以下是可重複使用的非同步函式：

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

試試看！

在 Windows 或 Mac 上，使用 Microsoft Edge 或 Google Chrome 95 以上版本，開啟其中一個 EyeDropper 示範。

舉例來說，您可以試玩顏色遊戲的試用版。按下「Play」按鈕，在有限的時間內，嘗試從底部的清單中取樣顏色，與頂端的彩色方塊相符。

顏色遊戲試玩版。

隱私權和安全性考量

這個看似簡單的 Web API 背後，隱藏著可能有害的隱私權和安全性問題。如果惡意網站可以開始查看螢幕上的像素，會發生什麼事？

為解決這項疑慮，API 規格要求採取下列措施：

首先，API 不會在沒有使用者意圖的情況下啟動滴管模式。open() 方法只能在回應使用者動作 (例如點選按鈕) 時呼叫。
其次，如果使用者沒有再次表示意願，系統就無法擷取像素資訊。只有在使用者採取動作 (點選像素) 時，open() 傳回的 Promise 才會解析為顏色值。因此，使用者不會在不知情的情況下，讓吸管在背景運作。
為方便使用者輕鬆注意到滴管模式，瀏覽器必須清楚顯示該模式。因此，一般滑鼠游標會在短暫延遲後消失，並顯示專屬使用者介面。此外，啟動滴管模式和使用者選取像素之間會有一段延遲時間，確保使用者有時間看到放大鏡。
最後，使用者可以隨時取消滴管模式 (按下 esc 鍵)。

意見回饋

Chromium 團隊很想瞭解您使用 EyeDropper API 的體驗。

介紹 API 設計

API 是否有任何功能無法如預期運作？或者，是否有缺少的屬性或方法需要實作，才能實現您的想法？對安全模型有任何問題或意見嗎？在 API 的 GitHub 存放區中回報規格問題，或在現有問題中新增想法。

回報導入問題

您是否發現 Chromium 實作方式有錯誤？還是實作方式與規格不同？前往 new.crbug.com 提出錯誤回報。請務必盡可能提供詳細資訊、重現問題的簡單操作說明，並在「Components」(元件) 方塊中輸入 Blink>Forms>Color。

支援 API

您打算使用 EyeDropper API 嗎？您的公開支持有助於 Chromium 團隊優先處理功能，並向其他瀏覽器供應商展現支援這些功能的重要性。使用主題標記 #EyeDropper 發送推文給 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

實用連結

公開說明
規格草案
EyeDropper API 試用版 | EyeDropper API 試用版來源
Chromium 追蹤錯誤
ChromeStatus.com 項目
Blink 元件：Blink>Forms>Color
TAG 審查
WebKit 位置要求
Mozilla 位置要求
出貨意願

特別銘謝

EyeDropper API 由 Microsoft Edge 團隊的 Ionel Popescu 指定及實作。這篇文章由 Joe Medley 審查。

使用 EyeDropper API 挑選螢幕上任何像素的顏色 透過集合功能整理內容 你可以依據偏好儲存及分類內容。