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 eine vom Browser bereitgestellte Pipette zum Erstellen einer benutzerdefinierten Farbauswahl 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.

Mit Photoshop können Nutzer beispielsweise Farben aus dem Canvas verwenden, damit sie keine Farbe erraten müssen und die Gefahr besteht, dass sie falsch wird. 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 Creative-Anwendung mit Webtechnologien erstellen, möchten Sie Ihren Nutzern vielleicht eine ähnliche Funktion zur Verfügung stellen. Im Web ist dies jedoch nach Möglichkeit schwierig, insbesondere wenn Sie Farben aus dem gesamten Bildschirm des Geräts (z. B. aus einer anderen Anwendung) und nicht nur aus dem aktuellen Browsertab verwenden 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, die auf Desktop-Geräten ausgeführt werden, finden Sie im Drop-down-Menü für die 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.

EyeDropper API verwenden

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 Methode open() gibt ein Versprechen 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 Code der App kann auch den Pipettenmodus beenden. Dies kann sich als nützlich erweisen, 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. Klicken Sie auf die Schaltfläche Play und versuchen Sie innerhalb eines begrenzten Zeitraums, 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. Die Pipette 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. Aus diesem Grund verschwindet der normale Mauszeiger mit einer kurzen Verzögerung und es erscheint stattdessen die dedizierte Benutzeroberfläche. 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 abbrechen (durch Drücken der esc).

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 Umsetzung 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 einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung für die Reproduktion an. Geben Sie dann Blink>Forms>Color in das Feld Komponenten 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. Tweeten Sie mit dem Hashtag #EyeDropper an @ChromiumDev und teilen Sie uns mit, wo und wie Sie es 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.