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

EyeDropper API 可讓作者在建立自訂顏色挑選器時使用瀏覽器提供的滴管工具。

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

什麼是 EyeDropper API？

許多創意應用程式可讓使用者從應用程式視窗的某些部分，甚至整個螢幕畫面中挑選顏色，通常使用滴管中繼效果。

舉例來說，Photoshop 可讓使用者從畫布中對顏色進行取樣，因此不必猜測顏色，也就不會出錯。PowerPoint 也有提供滴管工具 在設定形狀的外框或填滿顏色時相當實用即使是 Chromium 開發人員工具，您也可以在 CSS 樣式面板中編輯顏色時使用滴管工具，因此您不必記住或複製其他位置的色彩代碼。

如果您使用網頁技術建構創意應用程式，可能會想為使用者提供類似的功能。不過，要在網頁上執行此操作並不容易，尤其需要從整個裝置螢幕的色彩取樣時 (例如從其他應用程式)，而不是只從目前的瀏覽器分頁進行色彩取樣。目前，網頁應用程式無法根據自身需求使用瀏覽器提供的滴水工具。

<input type="color"> 元素即將關閉。在執行於電腦裝置的 Chromium 瀏覽器中，它會在顏色挑選器下拉式選單中提供實用的滴管工具。不過，如果使用這個選項，您的應用程式就必須透過 CSS 自訂其內容，並且以 JavaScript 包裝 JavaScript，以供應用程式的其他部分使用。採用這個選項也代表其他瀏覽器無法存取這項功能。

EyeDropper API 提供從畫面中取樣色彩的方法，來填補這一缺口。

Chromium 顏色挑選器。

如何使用 EyeDropper API

瀏覽器支援

瀏覽器支援

  • 95
  • 95
  • x
  • x

資料來源

功能偵測和瀏覽器支援

首先，請先確認該 API 可用，再使用。

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

自 95 版起，以 Chromium 為基礎的瀏覽器 (例如 Edge 或 Chrome) 可支援 EyeDropper API。

使用 API

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

const eyeDropper = new EyeDropper();

open() 方法會傳回承諾，可於使用者選取畫面上的像素後解決，而解析值可使用 sRGBHex 格式 (#RRGGBB) 存取像素顏色。如果使用者按下 Esc 鍵離開滴管模式，承諾會遭到拒絕。

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」按鈕，並在有限時間內嘗試從底部清單中與頂端彩色方塊相符的顏色取樣。

彩色遊戲示範。

隱私權和安全性考量

這看似簡單的網路 API 隱藏了可能有害的隱私權和安全性疑慮。如果惡意網站可以開始看到您畫面上的像素，該怎麼辦？

為解決這個問題，API 規格要求採取下列措施：

  • 首先，API 不會讓滴管模式在沒有使用者意圖的情況下啟動。只有在回應使用者動作 (例如按鈕點擊) 時，才能呼叫 open() 方法。
  • 第二，在沒有使用者意圖的情況下，無法再次擷取任何像素資訊。open() 傳回的承諾只會解析為回應使用者動作 (按一下像素) 的顏色值。因此，除非使用者註意到，否則請不要在背景使用滴答。
  • 為幫助使用者輕鬆注意到滴管模式，瀏覽器必須明確呈現此模式。這就是一般的滑鼠遊標會在短暫延遲後消失的原因，並顯示專用的使用者介面。在滴管模式啟動到使用者選取像素後，系統也會延遲一段時間，以便確保使用者有時間看到放大鏡。
  • 最後，使用者隨時可以取消滴管模式 (按下 Esc 鍵)。

意見回饋：

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

告訴我們 API 設計

該 API 有什麼功能不如預期嗎？或者您需要實作提案的方法或屬性嗎？對於安全性模型有任何疑問或意見嗎？在 API 的 GitHub 存放區提交規格問題，或是將您的想法新增至現有問題中。

回報導入問題

你在 Chromium 的實作方式中發現錯誤嗎？或者，實作項目是否與規格不同？ 前往 new.crbug.com 回報錯誤。請務必盡可能提供詳細的細節與重現簡易操作說明，並在「元件」方塊中輸入 Blink>Forms>Color。Glitch 適合用來快速分享簡單快速的提案，

展現對 API 的支援

您打算使用 EyeDropper API 嗎？您的公開支援可協助 Chromium 團隊排定功能的優先順序，並向其他瀏覽器廠商瞭解這項功能有多重要。請使用主題標記 #EyeDropper 將 Tweet 訊息傳送至 @ChromiumDev，讓我們瞭解使用位置和方式。

實用連結

特別銘謝

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