EyeDropper
EyeDropper 介面代表一個吸管工具的例項，該工具可以由使用者開啟並用於從螢幕上選擇顏色。
建構函式
EyeDropper()實驗性-
返回一個新的
EyeDropper例項。
例項方法
EyeDropper 介面不繼承任何方法.
EyeDropper.open()實驗性-
返回一個 Promise，該 Promise 解析為一個提供對所選顏色訪問許可權的物件。
示例
開啟吸管工具並採樣顏色
此示例顯示瞭如何開啟吸管工具，並等待使用者從螢幕上選擇一個畫素，或者按 Escape 取消吸管工具模式。
HTML
html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
JavaScript
js
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"Your browser does not support the EyeDropper API";
return;
}
const eyeDropper = new EyeDropper();
eyeDropper
.open()
.then((result) => {
resultElement.textContent = result.sRGBHex;
resultElement.style.backgroundColor = result.sRGBHex;
})
.catch((e) => {
resultElement.textContent = e;
});
});
結果
中止吸管工具模式
此示例顯示了吸管工具模式也可以在使用者選擇顏色或按 Escape 之前被中止。
HTML
html
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
JavaScript
js
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"Your browser does not support the EyeDropper API";
return;
}
const eyeDropper = new EyeDropper();
const abortController = new AbortController();
eyeDropper
.open({ signal: abortController.signal })
.then((result) => {
resultElement.textContent = result.sRGBHex;
resultElement.style.backgroundColor = result.sRGBHex;
})
.catch((e) => {
resultElement.textContent = e;
});
setTimeout(() => {
abortController.abort();
}, 2000);
});
結果
規範
| 規範 |
|---|
| EyeDropper API # eyedropper-interface |
瀏覽器相容性
載入中…