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
Startseite
Thomas Steiner

Was ist die EyeDropper API?

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

In Photoshop können Nutzer beispielsweise Farben aus dem Arbeitsbereich auswählen, sodass sie nicht raten müssen und das Risiko, dass sie die falsche Farbe auswählen, geringer ist. PowerPoint bietet auch ein Pipetten-Tool, das beim Festlegen der Umriss- oder Füllfarbe einer Form hilfreich ist. Sogar die Chromium-Entwicklertools haben eine Pipette, die Sie beim Bearbeiten von Farben im CSS-Stilbereich verwenden können. So müssen Sie sich den Farbcode nicht merken oder ihn von einer anderen Stelle kopieren.

Wenn Sie eine kreative Anwendung mit Webtechnologien entwickeln, möchten Sie Ihren Nutzern möglicherweise eine ähnliche Funktion zur Verfügung stellen. Im Web ist das jedoch schwierig oder gar nicht möglich, insbesondere wenn Sie Farben vom gesamten Bildschirm des Geräts (z. B. aus einer anderen Anwendung) und nicht nur vom aktuellen Browser-Tab auswählen möchten. Es gibt kein vom Browser bereitgestelltes Pipetten-Tool, das Web-Apps für ihre eigenen Zwecke verwenden können.

Das Element <input type="color"> kommt infrage. In Chromium-basierten Browsern auf Desktopgeräten ist im Drop-down-Menü der Farbauswahl eine praktische Pipette verfügbar. Wenn Sie diese Option verwenden, müssen Sie sie jedoch mit CSS anpassen und in etwas JavaScript einbetten, damit sie für andere Teile Ihrer App verfügbar ist. Außerdem ist die Funktion dann in anderen Browsern nicht verfügbar.

Die EyeDropper API schließt diese Lücke, indem sie eine Möglichkeit bietet, Farben vom Bildschirm zu übernehmen.

Chromium-Farbauswahl

EyeDropper API verwenden

Unterstützte Browser

Browser Support

  • Chrome: 95.
  • Edge: 95.
  • Firefox: not supported.
  • Safari: not supported.

Source

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 in Chromium-basierten Browsern wie Edge oder Chrome ab Version 95 unterstützt.

API verwenden

Erstellen Sie zur Verwendung der API ein EyeDropper-Objekt und rufen Sie dann die zugehörige Methode open() auf.

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 Farbe des Pixels im sRGBHex-Format (#RRGGBB). Das Promise wird abgelehnt, wenn der Nutzer den Pipettenmodus 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 Pipettenmodus kann auch durch den Code der App beendet werden. Das kann nützlich sein, wenn sich der Status der App erheblich ändert. Möglicherweise wird ein Pop-up-Dialogfeld angezeigt, in dem der Nutzer zur Eingabe aufgefordert wird. Der Pipettenmodus sollte an diesem Punkt beendet werden.

Um die Pipette abzubrechen, können Sie das Signal eines AbortController-Objekts verwenden und es 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();

Nachfolgend finden Sie 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;
  }
}

Testen!

Öffnen Sie unter Windows oder Mac in Microsoft Edge oder Google Chrome 95 oder höher eine der Pipette-Demos.

Probieren Sie beispielsweise die Farbspiel-Demo aus. Klicken Sie auf die Schaltfläche Spielen und versuchen Sie, innerhalb einer begrenzten Zeit eine Farbe aus der Liste unten auszuwählen, die mit dem farbigen Quadrat oben übereinstimmt.

Farbdemo

Überlegungen zu Datenschutz und Sicherheit

Hinter dieser scheinbar einfachen Web-API verbirgt sich ein potenziell schädliches Datenschutz- und Sicherheitsrisiko. Was passiert, wenn eine schädliche Website Pixel von Ihrem Bildschirm sehen kann?

Um diesem Problem entgegenzuwirken, sind in der API-Spezifikation die folgenden Maßnahmen erforderlich:

  • Erstens kann der Pipettenmodus nicht ohne Nutzerabsicht gestartet werden. Die Methode open() kann nur als Reaktion auf eine Nutzeraktion (z. B. einen Klick auf eine Schaltfläche) aufgerufen werden.
  • Zweitens können ohne Nutzerabsicht keine Pixelinformationen abgerufen werden. Das von open() zurückgegebene Promise wird nur als Reaktion auf eine Nutzeraktion (Klicken auf ein Pixel) in einen Farbwert aufgelöst. Die Pipette kann also nicht im Hintergrund verwendet werden, ohne dass der Nutzer es bemerkt.
  • Damit Nutzer den Pipettenmodus leicht erkennen, muss er in Browsern deutlich sichtbar sein. Deshalb verschwindet der normale Mauszeiger nach kurzer Zeit und die spezielle Benutzeroberfläche wird stattdessen angezeigt. Außerdem gibt es eine Verzögerung zwischen dem Start des Pipettenmodus und dem Zeitpunkt, zu dem der Nutzer ein Pixel auswählen kann. So hat er genügend Zeit, die Lupe zu sehen.
  • Nutzer können den Pipettenmodus jederzeit beenden, indem sie die Esc-Taste drücken.

Feedback

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

Informationen zum API-Design

Funktioniert etwas an der API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie Fragen oder Anmerkungen zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im GitHub-Repository der API oder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melden Sie einen Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und geben Sie Blink>Forms>Color in das Feld Components (Komponenten) ein.

API-Support 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 an @ChromiumDev mit dem Hashtag #EyeDropper und teilen Sie uns mit, wo und wie Sie die Funktion verwenden.

Nützliche Links

Danksagungen

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