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 |
浏览器兼容性
加载中…