Interfejs EyeDropper API umożliwia autorom użycie zakraplacza dostarczanego w przeglądarce do tworzenia niestandardowych selektora kolorów.
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.
Jak korzystać z interfejsu EyeDropper API
Obsługiwane przeglądarki
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.
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
- Wyjaśnienie publiczne
- Wersja robocza specyfikacji
- Prezentacja interfejsu EyeDropper API | Źródło wersji demonstracyjnej interfejsu EyeDropper API
- Błąd śledzenia w Chromium
- Wpis na ChromeStatus.com
- Komponent Blink:
Blink>Forms>Color
- Przegląd tagów
- Żądanie pozycji w WebKit
- Żądanie pozycji w Mozilli
- Zamiar wysyłki
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.