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

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

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

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

Ergebnis

Spezifikationen

Specification
EyeDropper API
# eyedropper-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
EyeDropper
Experimental
EyeDropper() constructor
Experimental
open
Experimental
Secure context required
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.