このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
EyeDropper
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
EyeDropper インターフェイスは、ユーザーが開いて画面から色を選択できるスポイトツールのインスタンスを表します。
コンストラクター
EyeDropper()-
新しい
EyeDropperのインスタンスを返します。
インスタンスメソッド
EyeDropper インターフェイスは、メソッドを継承しません。
EyeDropper.open()-
選択された色へのアクセスを提供するオブジェクトで解決するプロミスを返します。
例
スポイトツールを開いて色を取得する
この例では、スポイトツールを開き、ユーザーが画面からピクセルを選択するか Escape を押してスポイトモードをキャンセルするのを待つ方法を示します。
HTML
html
<button id="start-button">スポイトを開く</button> <span id="result"></span>
JavaScript
js
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"このブラウザーは 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">スポイトを開く</button> <span id="result"></span>
JavaScript
js
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"このブラウザーは 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 |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。