EyeDropper
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Giao diện EyeDropper đại diện cho một phiên bản công cụ eyedropper có thể được mở và sử dụng bởi người dùng để chọn màu từ màn hình.
Hàm khởi tạo
EyeDropper()Thử nghiệm-
Trả về một phiên bản
EyeDroppermới.
Phương thức phiên bản
Giao diện EyeDropper không kế thừa bất kỳ phương thức nào.
EyeDropper.open()Thử nghiệm-
Trả về một promise giải quyết thành một đối tượng cung cấp quyền truy cập vào màu được chọn.
Ví dụ
Mở công cụ eyedropper và lấy mẫu màu
Ví dụ này cho thấy cách mở một công cụ eyedropper và chờ người dùng chọn một pixel từ màn hình, hoặc nhấn Escape để hủy chế độ eyedropper.
HTML
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
JavaScript
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;
});
});
Kết quả
Hủy chế độ eyedropper
Ví dụ này cho thấy rằng chế độ eyedropper cũng có thể bị hủy trước khi người dùng chọn màu hoặc nhấn Escape.
HTML
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
JavaScript
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);
});
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| EyeDropper API # eyedropper-interface |