new EyeDropper() — Methode · JavaScript-Referenz

Signatur

new EyeDropper()

Beschreibung

Der Konstruktor new EyeDropper() erzeugt eine Instanz der EyeDropper API. Das Objekt selbst tut beim Erzeugen noch nichts. Erst der Aufruf von open() startet den Pipettenmodus des Browsers. Der Nutzer kann dann einen Pixel irgendwo auf dem Bildschirm anklicken, auch außerhalb des Browserfensters.

Einsetzen lässt sich das in Bildbearbeitungs- und Design-Tools, Theme-Editoren, Farbwählern für CMS-Oberflächen oder überall sonst, wo Nutzer eine Farbe aus einer vorhandenen Vorlage übernehmen sollen. Das Ergebnis ist ein Objekt mit der Eigenschaft sRGBHex, zum Beispiel "#1a73e8".

Der Konstruktor nimmt keine Argumente. Die Instanz kann mehrfach verwendet werden: Jeder Aufruf von open() startet eine neue Farbauswahl. Wegen der Sicherheitsvorgaben muss open() durch eine Nutzeraktion ausgelöst werden, zum Beispiel einen Klick. Außerdem ist die API nur in einem sicheren Kontext (HTTPS) verfügbar.

Rückgabewert

Typ

EyeDropper

Beschreibung

Ein neues EyeDropper-Objekt mit der Methode open(options), die ein Promise<{ sRGBHex: string }> zurückgibt.

Beispiele

Instanz erzeugen und Farbe per Klick auswählen

const button = document.querySelector('#pick-color');
const swatch = document.querySelector('#swatch');

button.addEventListener('click', async () => {
  const eyeDropper = new EyeDropper();
  try {
    const { sRGBHex } = await eyeDropper.open();
    swatch.style.backgroundColor = sRGBHex;
    console.log('Gewählte Farbe:', sRGBHex);
  } catch (err) {
    // Nutzer hat mit Esc abgebrochen
    console.log('Auswahl abgebrochen:', err.name);
  }
});

Gewählte Farbe: #1a73e8

Feature-Erkennung mit Fallback auf <input type="color">

const colorInput = document.querySelector('#color-input');
const pickButton = document.querySelector('#pick-color');

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  pickButton.addEventListener('click', async () => {
    try {
      const result = await eyeDropper.open();
      colorInput.value = result.sRGBHex;
    } catch {
      /* abgebrochen */
    }
  });
} else {
  // Nicht unterstützt: Button ausblenden, nur den nativen Farbwähler anbieten
  pickButton.hidden = true;
  console.log('EyeDropper API nicht verfügbar');
}

Auswahl nach Zeitlimit per AbortSignal abbrechen

document.querySelector('#pick').addEventListener('click', async () => {
  const eyeDropper = new EyeDropper();
  const controller = new AbortController();
  // Nach 10 Sekunden automatisch abbrechen
  const timer = setTimeout(() => controller.abort(), 10_000);

  try {
    const { sRGBHex } = await eyeDropper.open({ signal: controller.signal });
    console.log(sRGBHex);
  } catch (err) {
    console.log(err.name); // "AbortError"
  } finally {
    clearTimeout(timer);
  }
});

AbortError

// Wichtig · Fallstricke

Browser-Kompatibilität: Die API wird nur von Chromium-Browsern unterstützt (Chrome/Edge 95+, nicht auf Android). Firefox und Safari unterstützen sie nicht. Deshalb immer vorher mit 'EyeDropper' in window prüfen.
Sicherer Kontext: Die API ist nur unter HTTPS oder localhost verfügbar.
Nutzeraktion erforderlich: Ohne Nutzeraktion, etwa einen Klick, wird das Promise von open() mit einem NotAllowedError abgewiesen. Ein Aufruf beim Laden der Seite funktioniert also nicht.
Nur eine Auswahl gleichzeitig: Ist bereits eine Pipette geöffnet, schlägt ein weiterer Aufruf von open() mit InvalidStateError fehl.
Abbruch: Drückt der Nutzer Esc oder wird das AbortSignal ausgelöst, wird das Promise mit AbortError abgewiesen. Deshalb try/catch verwenden.
Datenschutz: Der Browser gibt nur die Farbe des einen ausgewählten Pixels zurück, keine Bildschirminhalte. Die Auswahl muss der Nutzer selbst bestätigen.
Das Ergebnis liegt immer im sRGB-Format als Hex-String vor. Farben aus größeren Farbräumen wie Display P3 werden dabei unter Umständen verfälscht.

Siehe auch

EyeDropper EyeDropper.prototype.open() AbortSignal Promise new Accelerometer() new DataCue()