Wybieranie kolorów dowolnego piksela na ekranie za pomocą interfejsu EyeDropper API

Interfejs EyeDropper API umożliwia autorom użycie zakraplacza dostarczanego w przeglądarce do tworzenia niestandardowych selektora kolorów.

Patrick Brosset
Patrick Brosset
X GitHub
Thomas Steiner

Czym jest interfejs EyeDropper API?

Wiele aplikacji kreatywnych pozwala użytkownikom wybierać kolory z części okna aplikacji, a nawet z całego ekranu, zwykle przy użyciu metafory zakraplacza.

Na przykład w Photoshopie użytkownicy mogą próbkować kolory z odbitki na płótnie, dzięki czemu nie muszą zgadywać, jaki kolor wybrać, i ryzyko, że pomyli się podczas filtrowania. PowerPoint ma też narzędzie zakraplacza, które przydaje się do ustawiania koloru konturu i wypełnienia kształtu. Nawet Narzędzia deweloperskie w Chromium mają zakraplacz, którego można używać do edytowania kolorów w panelu Style CSS. Dzięki temu nie trzeba zapamiętywać ani kopiować kodu kolorów z innego miejsca.

Jeśli tworzysz aplikację kreatywną przy użyciu technologii internetowych, możesz udostępnić użytkownikom podobną funkcję. Jednak w internecie jest to w ogóle trudne, o ile to możliwe, zwłaszcza jeśli chcesz pobrać kolory z całego ekranu urządzenia (np. z innej aplikacji), a nie tylko z bieżącej karty przeglądarki. Nie ma dostępnego w przeglądarce narzędzia zakraplacza, którego aplikacje internetowe mogą używać do własnych potrzeb.

Element <input type="color"> jest bliski tego. W przeglądarkach opartych na Chromium działających na komputerach oferuje on przydatne zakraplacze w menu selektora kolorów. Jednak w takiej sytuacji aplikacja musi dostosować ją za pomocą CSS i dodać do niej trochę kodu JavaScript, aby udostępnić ją innym częściom aplikacji. Jeśli skorzystasz z tej opcji, inne przeglądarki nie będą miały do niej dostępu.

Interfejs EyeDropper API wypełnia tę lukę, umożliwiając próbkowanie kolorów z ekranu.

Selektor kolorów Chromium.

Jak korzystać z interfejsu EyeDropper API

Obsługiwane przeglądarki

Obsługa przeglądarek

  • 95
  • 95
  • x
  • x

Źródło

Wykrywanie funkcji i obsługa przeglądarek

Przed użyciem interfejsu API upewnij się, że jest on dostępny.

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

Interfejs EyeDropper API jest obsługiwany w przeglądarkach opartych na Chromium, takich jak Edge czy Chrome, od wersji 95.

Korzystanie z interfejsu API

Aby użyć tego interfejsu API, utwórz obiekt EyeDropper, a potem wywołaj jego metodę open().

const eyeDropper = new EyeDropper();

Metoda open() zwraca obietnicę, która znika po kliknięciu przez użytkownika piksela na ekranie, a uzyskana wartość zapewnia dostęp do koloru piksela w formacie sRGBHex (#RRGGBB). Obietnica jest odrzucana, jeśli użytkownik opuści tryb zakraplacza, naciskając klawisz Esc.

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.
}

Kod aplikacji może też wyłączać tryb zakraplacza. Jest to przydatne, jeśli stan aplikacji znacznie się zmieni. Może pojawić się wyskakujące okienko z prośbą o wpisanie odpowiedzi przez użytkownika. W tym momencie należy wyłączyć tryb zakraplacza.

Aby anulować działanie zakraplacza, możesz użyć sygnału obiektu AbortController i przekazać go do metody open().

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();

Po połączeniu wszystkich tych elementów poniżej znajduje się funkcja asynchroniczna wielokrotnego użytku:

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

Wypróbuj

W przeglądarce Microsoft Edge albo Google Chrome w wersji 95 lub nowszej w systemie Windows lub na Macu otwórz jedną z wersji demonstracyjnych EyeDropper.

Zobacz dla przykładu wersję demonstracyjną gry z kolorami. Kliknij przycisk Odtwórz i przez ograniczony czas spróbuj pobrać kolor z listy na dole, który będzie taki sam jak kolorowy kwadrat u góry.

Wersja demonstracyjna gry z kolorami.

Kwestie związane z prywatnością i bezpieczeństwem

Za tym pozornie prostym internetowym interfejsem API kryje się potencjalnie szkodliwa kwestia dotycząca prywatności i bezpieczeństwa. Co by było, gdyby złośliwa strona mogła zobaczyć piksele Twojego ekranu?

Aby rozwiać ten problem, specyfikacja interfejsu API wymaga zastosowania następujących środków:

  • Po pierwsze, interfejs API nie pozwala na uruchomienie trybu zakraplacza bez intencji użytkownika. Metoda open() może być wywoływana tylko w odpowiedzi na działanie użytkownika (takie jak kliknięcie przycisku).
  • Po drugie, informacje o pikselach nie mogą być pobierane bez intencji użytkownika. Obietnica zwrócona przez open() przyjmuje wartość koloru tylko w odpowiedzi na działanie użytkownika (kliknięcie piksela). Zakraplacza nie można więc używać w tle, jeśli użytkownik go nie zauważy.
  • Aby ułatwić użytkownikom zauważenie trybu zakraplacza, przeglądarki muszą określić go jako oczywisty. Z tego powodu zwykły kursor myszy znika po krótkim opóźnieniu i zamiast niego pojawia się specjalny interfejs. Występuje też opóźnienie między uruchomieniem trybu zakraplacza a momentem, w którym użytkownik może wybrać piksel, aby mieć czas na wyświetlenie lupy.
  • Użytkownicy mogą też w każdej chwili wyłączyć tryb zakraplacza (naciskając klawisz Esc).

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia z korzystania z interfejsu EyeDropper API.

Opowiedz nam o projekcie interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w repozytorium GitHub interfejsu API lub wspomnij o istniejącym problemie.

Zgłoś problem z implementacją

Czy wystąpił błąd w implementacji Chromium? A może implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje odtwarzania, a następnie wpisz Blink>Forms>Color w polu Komponenty. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy zamierzasz korzystać z interfejsu EyeDropper API? Twoja publiczna pomoc pomaga zespołowi Chromium priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie. Wyślij tweeta na adres @ChromiumDev, używając hashtagu #EyeDropper, i daj nam znać, gdzie i w jaki sposób go używasz.

Przydatne linki

Podziękowania

Interfejs EyeDropper API został stworzony i wdrożony przez Ionela Popescu z zespołu Microsoft Edge. Ten post został sprawdzony przez Joe Medley.