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

Interfejs EyeDropper API umożliwia autorom korzystanie z dostarczonej przez przeglądarkę pipety podczas tworzenia niestandardowych selektorów kolorów.

Patrick Brosset
Patrick Brosset
Strona główna
Thomas Steiner

Czym jest interfejs EyeDropper API?

Wiele aplikacji do tworzenia treści umożliwia użytkownikom wybieranie kolorów z części okna aplikacji, a nawet z całego ekranu, zwykle za pomocą narzędzia zakraplacza.

Na przykład Photoshop umożliwia użytkownikom próbkowanie kolorów z obszaru roboczego, dzięki czemu nie muszą zgadywać koloru i ryzykować pomyłki. Program PowerPoint ma też narzędzie zakraplacza, które jest przydatne podczas ustawiania koloru konturu lub wypełnienia kształtu. Nawet Narzędzia deweloperskie w Chromium mają zakraplacz, którego możesz używać podczas edytowania kolorów w panelu stylów CSS, dzięki czemu nie musisz pamiętać ani kopiować kodu koloru z innego miejsca.

Jeśli tworzysz aplikację kreatywną z użyciem technologii internetowych, możesz udostępnić użytkownikom podobną funkcję. Jednak w przypadku internetu jest to trudne, a nawet niemożliwe, zwłaszcza jeśli chcesz pobrać próbki kolorów z całego ekranu urządzenia (np. z innej aplikacji), a nie tylko z bieżącej karty przeglądarki. Nie ma narzędzia zakraplacza dostarczanego przez przeglądarkę, z którego aplikacje internetowe mogłyby korzystać na własne potrzeby.

Element <input type="color"> jest blisko. W przypadku przeglądarek opartych na Chromium na urządzeniach stacjonarnych udostępnia przydatny zakraplacz w menu wyboru kolorów. Oznacza to jednak, że aplikacja musiałaby dostosować ją za pomocą CSS i zawierać trochę kodu JavaScript, aby była dostępna w innych częściach aplikacji. Wybranie tej opcji oznacza również, że inne przeglądarki nie będą miały dostępu do tej funkcji.

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

Selektor kolorów Chromium.

Jak korzystać z interfejsu EyeDropper API

Obsługa przeglądarek

Browser Support

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

Source

Wykrywanie funkcji i obsługa przeglądarek

Zanim zaczniesz korzystać z 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ć interfejsu API, utwórz obiekt EyeDropper, a następnie wywołaj jego metodę open().

const eyeDropper = new EyeDropper();

Metoda open() zwraca obietnicę, która jest spełniana po wybraniu przez użytkownika piksela na ekranie, a spełniona 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ż anulować tryb zakraplacza. Może się to przydać, jeśli stan aplikacji ulegnie znaczącej zmianie. Może pojawić się wyskakujące okienko, które wymaga wprowadzenia danych przez użytkownika. Tryb pipety powinien zostać w tym momencie zatrzymany.

Aby anulować zakraplacz, 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();

Poniżej znajdziesz funkcję asynchroniczną, której możesz używać wielokrotnie:

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

Otwórz jedną z demonstracji zakraplacza w przeglądarce Microsoft Edge lub Google Chrome w wersji 95 lub nowszej na komputerze z systemem Windows lub macOS.

Wypróbuj na przykład wersję demonstracyjną gry kolorystycznej. Kliknij przycisk Graj i w ograniczonym czasie spróbuj wybrać kolor z listy u dołu, który pasuje do kolorowego kwadratu u góry.

Wersja demonstracyjna gry Color.

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

Za tym pozornie prostym interfejsem API kryje się potencjalnie szkodliwy problem związany z prywatnością i bezpieczeństwem. Co by było, gdyby złośliwa witryna mogła zacząć widzieć piksele z Twojego ekranu?

Aby rozwiązać ten problem, specyfikacja interfejsu API wymaga zastosowania tych środków:

  • Po pierwsze, interfejs API nie pozwala na uruchomienie trybu zakraplacza bez intencji użytkownika. Metodę open() można wywołać tylko w odpowiedzi na działanie użytkownika (np. kliknięcie przycisku).
  • Po drugie, bez intencji użytkownika nie można ponownie pobrać informacji o pikselach. Obietnica zwrócona przez open() jest realizowana tylko w przypadku wartości koloru w odpowiedzi na działanie użytkownika (kliknięcie piksela). Dlatego nie można używać zakraplacza w tle bez wiedzy użytkownika.
  • Aby ułatwić użytkownikom zauważenie trybu zakraplacza, przeglądarki muszą go wyraźnie oznaczać. Dlatego po krótkim opóźnieniu znika zwykły kursor myszy, a zamiast niego pojawia się specjalny interfejs. Istnieje też opóźnienie między rozpoczęciem trybu zakraplacza a momentem, w którym użytkownik może wybrać piksel. Dzięki temu ma on czas na zobaczenie lupy.
  • Użytkownicy mogą w każdej chwili anulować tryb zakraplacza (naciskając klawisz esc).

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia związane z korzystaniem z interfejsu EyeDropper API.

Opisz projekt interfejsu API

Czy w API jest coś, co nie działa tak, jak oczekujesz? Czy brakuje metod lub właściwości, które są potrzebne do realizacji Twojego pomysłu? Masz pytania lub uwagi dotyczące modelu zabezpieczeń? Zgłoś problem ze specyfikacją w repozytorium GitHub interfejsu API lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemu z implementacją

Czy w implementacji Chromium występuje błąd? Czy implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtworzenia problemu i wpisz Blink>Forms>Color w polu Komponenty.

Wyrażanie poparcia dla interfejsu API

Czy planujesz używać interfejsu EyeDropper API? Twoje publiczne wsparcie pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich obsługiwanie. Wyślij tweeta do @ChromiumDev z hasztagiem #EyeDropper i napisz, gdzie i jak korzystasz z tego narzędzia.

Przydatne linki

Podziękowania

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