EyeDropper API 可讓作者在建立自訂顏色挑選器時使用瀏覽器提供的滴管工具。
什麼是 EyeDropper API?
許多創意應用程式可讓使用者從應用程式視窗的某些部分,甚至整個螢幕畫面中挑選顏色,通常使用滴管中繼效果。
舉例來說,Photoshop 可讓使用者從畫布中對顏色進行取樣,因此不必猜測顏色,也就不會出錯。PowerPoint 也有提供滴管工具 在設定形狀的外框或填滿顏色時相當實用即使是 Chromium 開發人員工具,您也可以在 CSS 樣式面板中編輯顏色時使用滴管工具,因此您不必記住或複製其他位置的色彩代碼。
如果您使用網頁技術建構創意應用程式,可能會想為使用者提供類似的功能。不過,要在網頁上執行此操作並不容易,尤其需要從整個裝置螢幕的色彩取樣時 (例如從其他應用程式),而不是只從目前的瀏覽器分頁進行色彩取樣。目前,網頁應用程式無法根據自身需求使用瀏覽器提供的滴水工具。
<input type="color">
元素即將關閉。在執行於電腦裝置的 Chromium 瀏覽器中,它會在顏色挑選器下拉式選單中提供實用的滴管工具。不過,如果使用這個選項,您的應用程式就必須透過 CSS 自訂其內容,並且以 JavaScript 包裝 JavaScript,以供應用程式的其他部分使用。採用這個選項也代表其他瀏覽器無法存取這項功能。
EyeDropper API 提供從畫面中取樣色彩的方法,來填補這一缺口。
如何使用 EyeDropper API
瀏覽器支援
功能偵測和瀏覽器支援
首先,請先確認該 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,讓我們瞭解使用位置和方式。
實用連結
- 公開說明
- 規格草稿
- EyeDropper API 示範 | EyeDropper API 示範來源
- Chromium 追蹤錯誤
- ChromeStatus.com 項目
- 閃爍元件:
Blink>Forms>Color
- TAG 審查
- WebKit 位置要求
- Mozilla 位置要求
- 預計出貨意圖
特別銘謝
Microsoft Edge 團隊的 Ionel Popescu 指明及實作 EyeDropper API。這篇文章是由 Joe Medley 審查。