EyeDropper

Limited availability

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

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die EyeDropper-Schnittstelle repräsentiert eine Instanz eines Pipettenwerkzeugs, das vom Benutzer geöffnet und verwendet werden kann, um Farben vom Bildschirm auszuwählen.

Konstruktor

EyeDropper() Experimentell: Gibt eine neue EyeDropper-Instanz zurück.

Instanzmethoden

Die EyeDropper-Schnittstelle erbt keine Methoden.

EyeDropper.open() Experimentell: Gibt ein Promise zurück, das in ein Objekt aufgelöst wird, das Zugriff auf die ausgewählte Farbe bietet.

Beispiele

Öffnen des Pipettenwerkzeugs und Ausprobieren einer Farbe

Dieses Beispiel zeigt, wie man ein Pipettenwerkzeug öffnet und auf den Benutzer wartet, entweder ein Pixel vom Bildschirm auszuwählen oder Escape zu drücken, um den Pipettenmodus abzubrechen.

HTML

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

Ergebnis

Abbrechen des Pipettenmodus

Dieses Beispiel zeigt, dass der Pipettenmodus auch abgebrochen werden kann, bevor der Benutzer eine Farbe ausgewählt oder Escape gedrückt hat.

HTML

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

Ergebnis

Spezifikationen

Specification
EyeDropper API # eyedropper-interface

Browser-Kompatibilität

BCD tables only load in the browser