EyeDropper

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

EyeDropper インターフェイスは、ユーザーが開いて画面から色を選択できるスポイトツールのインスタンスを表します。

コンストラクター

EyeDropper() Experimental: 新しい EyeDropper のインスタンスを返します。

インスタンスメソッド

EyeDropper インターフェイスは、メソッドを継承しません。

EyeDropper.open() Experimental: 選択された色へのアクセスを提供するオブジェクトで解決するプロミスを返します。

例

スポイトツールを開いて色を取得する

この例では、スポイトツールを開き、ユーザーが画面からピクセルを選択するか Escape を押してスポイトモードをキャンセルするのを待つ方法を示します。

HTML

html

<button id="start-button">スポイトを開く</button> <span id="result"></span>

JavaScript

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

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);
});

結果

仕様書

Specification
EyeDropper API # eyedropper-interface

ブラウザーの互換性

BCD tables only load in the browser