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

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

什麼是 EyeDropper API?

許多創意應用程式都允許使用者從應用程式視窗的部分區域,甚至是整個螢幕畫面中挑選顏色,通常會使用滴管工具比喻。

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

如果您使用網頁技術建構創意應用程式,可能會想為使用者提供類似的功能。不過,在網頁上執行這項操作的難度很高,尤其是如果您想從整個裝置螢幕 (例如從其他應用程式) 取樣顏色,而非只從目前的瀏覽器分頁取樣,瀏覽器並未提供滴管工具,供網路應用程式使用。

<input type="color"> 元素就很接近。在電腦裝置上執行的 Chromium 瀏覽器中,色彩挑選器的下拉式選單會提供實用的滴管工具。不過,使用這個選項意味著應用程式必須使用 CSS 進行自訂,並在其中加入一些 JavaScript,才能讓其他瀏覽器存取這項功能。此外,選擇這個選項也意味著其他瀏覽器無法存取這項功能。

EyeDropper API 可提供從螢幕上取樣顏色的方式,彌補這項缺陷。

Chromium 顏色挑選器。

如何使用 EyeDropper API

瀏覽器支援

瀏覽器支援

  • Chrome:95。
  • 邊緣:95。
  • Firefox:不支援。
  • Safari:不支援。

資料來源

功能偵測和瀏覽器支援

請先確認 API 可用,再使用該 API。

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

自 95 版起,Edge 或 Chrome 等以 Chromium 為基礎的瀏覽器皆支援 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 回報錯誤。請務必盡可能提供所有細節、重現問題的簡單操作說明,然後在「Components」(元件) 方塊中輸入 Blink>Forms>ColorGlitch 可讓您輕鬆快速地分享重現內容。

顯示 API 支援

您打算使用 EyeDropper API 嗎?您的公開支援服務可幫助 Chromium 團隊優先開發特定功能,並說明其他瀏覽器廠商對於這些功能的支援有多重要。使用主題標記 #EyeDropper 發送推文給 @ChromiumDev,告訴我們你在何處使用這項功能,以及使用方式。

實用連結

特別銘謝

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