Diese Seite wurde von der Cloud Translation API übersetzt.

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

Mit der EyeDropper API können Autoren einen vom Browser bereitgestellten Farbpicker zum Erstellen benutzerdefinierter Farbauswahlen verwenden.

Patrick Brosset

Thomas Steiner

Was ist die EyeDropper API?

In vielen Kreativanwendungen 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 erfassen, sodass sie nicht raten und Gefahr laufen, die falsche Farbe zu wählen. PowerPoint bietet auch eine Pipette, die sich zum Festlegen der Umriss- oder Füllungsfarbe einer Form eignet. Auch die Chromium-Entwicklertools haben eine Pipette, die Sie beim Bearbeiten von Farben im Bereich „CSS-Stile“ verwenden können. So müssen Sie sich den Farbcode nicht merken oder von woanders kopieren.

Wenn Sie eine kreative Anwendung mit Webtechnologien erstellen, sollten Sie Ihren Nutzern eine ähnliche Funktion anbieten. Im Web ist das jedoch schwierig, wenn nicht gar unmöglich, insbesondere wenn Sie Farben vom gesamten Display des Geräts (z. B. aus einer anderen Anwendung) und nicht nur vom aktuellen Browsertab erfassen 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 dem schon sehr nahe. In Chromium-basierten Browsern auf Desktop-Geräten gibt es im Drop-down-Menü der Farbauswahl eine hilfreiche Pipette. Wenn Sie diese Option verwenden, müssen Sie sie jedoch mit CSS anpassen und in ein wenig JavaScript einbetten, damit sie für andere Teile Ihrer App verfügbar ist. Außerdem haben andere Browser dann keinen Zugriff auf die Funktion.

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

Chromium-Farbauswahl

Verwendung der EyeDropper API

Unterstützte Browser

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

API verwenden

Wenn Sie die API verwenden möchten, erstellen Sie ein EyeDropper-Objekt und rufen Sie dann die Methode open() auf.

const eyeDropper = new EyeDropper();

Die open()-Methode gibt ein Versprechen zurück, das erfüllt wird, nachdem der Nutzer ein Pixel auf dem Bildschirm ausgewählt hat. Der erfüllte Wert bietet Zugriff auf die Farbe des Pixels im sRGBHex-Format (#RRGGBB). Das Versprechen wird abgelehnt, wenn der Nutzer den Pipettenmodus verlässt, indem er die Taste Esc drückt.

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 Code der App kann auch den Pipettenmodus beenden. Das 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 Pipettenmodus sollte an dieser Stelle beendet werden.

Wenn Sie den Pipetten-Cursor abbrechen möchten, 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();

Im Folgenden 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 macOS mit Microsoft Edge oder Google Chrome 95 oder höher eine der Demos für die Pipette.

Probieren Sie zum Beispiel die Demo des Farbspiels aus. Klicke auf die Schaltfläche Spielen und versuche, innerhalb der vorgegebenen Zeit eine Farbe aus der Liste unten auszuwählen, die mit dem farbigen Quadrat oben übereinstimmt.

Demo des Farbspiels.

Datenschutz- und Sicherheitsaspekte

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

Um dieses Problem zu beheben, sind in der API-Spezifikation die folgenden Maßnahmen erforderlich:

Erstens: Der Pipettenmodus kann über die API 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: Es können keine Pixelinformationen mehr ohne Nutzerabsicht abgerufen werden. Das von open() zurückgegebene Versprechen wird nur als Reaktion auf eine Nutzeraktion (Klick auf ein Pixel) in einen Farbwert aufgelöst. Der Farbpicker kann also nicht im Hintergrund verwendet werden, ohne dass der Nutzer es bemerkt.
Damit Nutzer den Pipettenmodus leicht erkennen, müssen Browser den Modus deutlich sichtbar machen. Deshalb verschwindet der normale Mauszeiger nach einer kurzen Verzögerung und stattdessen wird die spezielle Benutzeroberfläche 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, damit er Zeit hat, die Lupe zu sehen.
Nutzer können den Pipettenmodus jederzeit beenden, indem sie die Taste Esc drücken.

Feedback

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

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell? Melden Sie ein Problem mit der Spezifikation im GitHub-Repository der API oder fügen Sie Ihre Anmerkungen zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chromium-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie den Fehler unter new.crbug.com. Geben Sie dabei so viele Details wie möglich an, eine einfache Anleitung zur Reproduktion und geben Sie Blink>Forms>Color in das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Beabsichtigen Sie, die EyeDropper API zu 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 ihn 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 überprüft.