Auswählen der Farben beliebiger Pixel auf dem Bildschirm mit der EyeDropper API

Mit der EyeDropper API können Autoren eine vom Browser bereitgestellte Pipette zum Erstellen benutzerdefinierter Farbauswahlen verwenden.

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

Was ist die EyeDropper API?

In vielen Creative-Anwendungen können Nutzer Farben aus Teilen des App-Fensters oder sogar aus dem gesamten Bildschirm auswählen, in der Regel mithilfe einer Pipette.

In Photoshop können Nutzer beispielsweise Farben aus dem Canvas ausprobieren, damit sie keine Farben erraten müssen und nicht das Risiko eines Fehlers besteht. PowerPoint bietet auch eine Pipette, nützlich für Umriss- oder Füllfarbe einer Form. Auch in den Chromium-Entwicklertools gibt es eine Pipette, die Sie beim Bearbeiten von Farben im CSS-Stilbereich verwenden können. So müssen Sie sich den Farbcode nicht merken oder von einer anderen Stelle kopieren.

Wenn Sie eine Creative-Anwendung mit Webtechnologien erstellen, möchten Sie Ihren Nutzern möglicherweise eine ähnliche Funktion zur Verfügung stellen. Im Web ist dies jedoch nach Möglichkeit schwierig, insbesondere wenn Sie Farben des gesamten Gerätebildschirms (z. B. aus einer anderen Anwendung) und nicht nur vom aktuellen Browsertab untersuchen möchten. Es gibt im Browser keine Pipette, die Webanwendungen für ihren eigenen Bedarf verwenden können.

Das Element <input type="color"> kommt nah heran. In Chromium-basierten Browsern auf Desktop-Geräten bietet sie eine hilfreiche Pipette im Drop-down-Menü zur Farbauswahl. Das bedeutet jedoch, dass Ihre App sie mit CSS anpassen und in JavaScript einbinden muss, um sie für andere Teile Ihrer App verfügbar zu machen. Diese Option bedeutet auch, dass andere Browser keinen Zugriff auf die Funktion haben.

Die EyeDropper API schließt diese Lücke, indem sie Farben aus dem Bildschirm abfragen kann.

Chromium-Farbauswahl.

EyeDropper API verwenden

Unterstützte Browser

Unterstützte Browser

  • 95
  • 95
  • x
  • x

Quelle

Funktionserkennung und Browserunterstützung

Prüfen Sie zuerst, ob die API verfügbar ist, bevor Sie sie verwenden.

if ('EyeDropper' in window) {
  // The API is available!
}

Die EyeDropper API wird ab Version 95 in Chromium-basierten Browsern wie Edge oder Chrome unterstützt.

API verwenden

Erstellen Sie ein EyeDropper-Objekt und rufen Sie dann die zugehörige open()-Methode auf, um die API zu verwenden.

const eyeDropper = new EyeDropper();

Die Methode open() gibt ein Promise zurück, das aufgelöst wird, nachdem der Nutzer ein Pixel auf dem Bildschirm ausgewählt hat. Der aufgelöste Wert bietet Zugriff auf die Pixelfarbe im sRGBHex-Format (#RRGGBB). Das Promise wird abgelehnt, wenn der Nutzer die Pipette durch Drücken der Esc-Taste verlässt.

try {
  const result = await eyeDropper.open();
  // The user selected a pixel, here is its color:
  const colorHexValue = result.sRGBHex;
} catch (err) {
  // The user escaped the eyedropper mode.
}

Der Pipettemodus kann auch über den Code der App deaktiviert werden. Dies kann nützlich sein, wenn sich der Status der App erheblich ändert. Möglicherweise wird ein Pop-up-Dialogfeld angezeigt, in dem die Eingabe des Nutzers erforderlich ist. Der Pipettemodus sollte an dieser Stelle angehalten werden.

Zum Abbrechen der Pipette können Sie das Signal eines AbortController-Objekts verwenden und an die Methode open() übergeben.

const abortController = new AbortController();

try {
  const result = await eyeDropper.open({signal: abortController.signal});
  // ...
} catch (err) {
  // ...
}

// And then later, when the eyedropper mode needs to be stopped:
abortController.abort();

Daraus ergibt sich eine wiederverwendbare asynchrone Funktion:

async function sampleColorFromScreen(abortController) {
  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open({signal: abortController.signal});
    return result.sRGBHex;
  } catch (e) {
    return null;
  }
}

Jetzt testen

Wenn Sie Microsoft Edge oder Google Chrome 95 oder höher unter Windows oder Mac verwenden, öffnen Sie eine der EyeDropper-Demos.

Sehen Sie sich zum Beispiel die Farbspiel-Demo an. Klicken Sie auf die Schaltfläche Wiedergabe und versuchen Sie nach Ablauf eines begrenzten Zeitraums, eine Farbe aus der Liste unten zu verwenden, die mit dem farbigen Quadrat oben übereinstimmt.

Farbspieldemo.

Datenschutz und Sicherheit

Hinter dieser scheinbar einfachen Web-API verbergen sich potenziell schädliche Datenschutz- und Sicherheitsbedenken. Was ist, wenn eine schädliche Website Pixel auf Ihrem Bildschirm sehen könnte?

Um dieses Problem zu beheben, sind für die API-Spezifikation folgende Maßnahmen erforderlich:

  • Erstens lässt die API den Pipettemodus nicht ohne Nutzerabsicht starten. Die Methode open() kann nur als Reaktion auf eine Nutzeraktion aufgerufen werden, z. B. einen Klick auf eine Schaltfläche.
  • Zweitens können keine Pixelinformationen ohne die Absicht des Nutzers abgerufen werden. Das von open() zurückgegebene Versprechen wird nur als Reaktion auf eine Nutzeraktion (Klick auf ein Pixel) in einen Farbwert aufgelöst. Die Pipette kann also nicht im Hintergrund verwendet werden, ohne dass der Nutzer sie bemerkt.
  • Damit Nutzer die Pipette leicht erkennen können, muss der Modus in Browsern deutlich erkennbar sein. Aus diesem Grund verschwindet der normale Cursor nach einer kurzen Verzögerung und die dedizierte Benutzeroberfläche wird stattdessen angezeigt. Außerdem gibt es eine Verzögerung zwischen dem Starten des Pipettemodus und dem Zeitpunkt, zu dem der Nutzer ein Pixel auswählen kann, um sicherzustellen, dass der Nutzer genug Zeit hat, die Lupe zu sehen.
  • Nutzer können die Pipette jederzeit beenden, indem sie die Esc-Taste drücken.

Feedback

Das Chromium-Team möchte mehr über Ihre Erfahrungen mit der EyeDropper API hören.

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie es erwartet hatten? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im GitHub-Repository der API oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler bei der Implementierung von Chromium gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie Blink>Forms>Color in das Feld Komponenten ein. Glitch eignet sich perfekt, um schnelle und einfache Reproduzierungen zu teilen.

Unterstützung für die API zeigen

Möchten Sie die EyeDropper API verwenden? Ihre öffentliche Unterstützung hilft dem Chromium-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen. Senden Sie einen Tweet mit dem Hashtag #EyeDropper an @ChromiumDev und teilen Sie uns mit, wo und wie Sie den Dienst verwenden.

Nützliche Links

Danksagungen

Die EyeDropper API wurde von Ionel Popescu vom Microsoft Edge-Team spezifiziert und implementiert. Dieser Beitrag wurde von Joe Medley geprüft.