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

Interfejs EyeDropper API umożliwia autorom używanie zakraplacza dostępnego w przeglądarce do tworzenia niestandardowych selektora kolorów.

Patrick Brosset

Thomas Steiner

Czym jest interfejs EyeDropper API?

Wiele aplikacji do tworzenia pozwala użytkownikom wybierać kolory 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 pobieranie próbek kolorów z płótna, dzięki czemu nie muszą zgadywać koloru i ryzykować popełnienia błędu. W programie PowerPoint jest też narzędzie zakraplacza, które jest przydatne przy ustawianiu koloru konturu i wypełnienia kształtu. Nawet Narzędzia deweloperskie w Chromium mają zakraplacz, który pozwala edytować kolory w panelu Style CSS, dzięki czemu nie trzeba pamiętać ani kopiować kodu kolorów z innego miejsca.

Jeśli tworzysz kreatywną aplikację z wykorzystaniem technologii internetowych, możesz udostępnić użytkownikom podobną funkcję. W internecie jest to jednak trudne, a czasem w ogóle 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 w przeglądarce dostępnego w przeglądarce narzędzia zakraplacza, którego aplikacje internetowe mogą używać do własnych potrzeb.

Element <input type="color"> jest blisko. W przeglądarkach opartych na Chromium na komputerach znajdziesz przydatne narzędzie zakraplacza w menu selektora kolorów. Jednak w tym przypadku aplikacja musiałaby być dostosowana za pomocą CSS i opakowana w trochę kodu JavaScript, aby była dostępna w innych częściach aplikacji. Wybranie tej opcji oznacza też, że inne przeglądarki nie będą miały dostępu do tej funkcji.

Interfejs EyeDropper API wypełnia tę lukę, zapewniając możliwość pobierania próbek kolorów z ekranu.

Jak korzystać z interfejsu EyeDropper API

Obsługa przeglądarek

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 korzystać z tego 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 realizowana po wybraniu przez użytkownika piksela na ekranie. Zrealizowana wartość zapewnia dostęp do koloru piksela w formacie sRGBHex (#RRGGBB). Obietnica jest odrzucana, jeśli użytkownik opuszcza tryb pipety, 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 to być przydatne, jeśli stan aplikacji ulegnie znacznej zmianie. Być może pojawi się wyskakujące okienko i wymaga danych wejściowych użytkownika. W tym momencie tryb pipety powinien zostać zatrzymany.

Aby anulować pipetę, możesz użyć sygnału obiektu AbortController i przekazać go metodzie 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 przykład funkcji asynchronicznej, którą można wielokrotnie używać:

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 systemie Windows lub macOS otwórz w przeglądarce Microsoft Edge lub Google Chrome w wersji 95 lub nowszej jedno z demo narzędzia EyeDropper.

Wypróbuj na przykład demo gry z kolorami. Kliknij przycisk Odtwórz i w ograniczonym czasie spróbuj wybrać kolor z listy u dołu, który pasuje do kolorowego kwadratu u góry.

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

Ten pozornie prosty interfejs API do przeglądarki skrywa potencjalnie szkodliwe zagrożenia związane z prywatnością i bezpieczeństwem. Co zrobić, jeśli złośliwa strona zacznie widzieć piksele z Twojego ekranu?

Aby rozwiązać ten problem, specyfikacja interfejsu API wymaga podjęcia tych działań:

• Po pierwsze, interfejs API nie pozwala uruchomić trybu pipety bez intencji użytkownika. Metoda open() może być wywoływana tylko w odpowiedzi na działanie użytkownika (np. kliknięcie przycisku).
• Po drugie, nie można pobrać informacji o pikselach bez ponownego zamiaru użytkownika. Obietnica zwrócona przez funkcję open() przyjmuje wartość koloru tylko w odpowiedzi na działanie użytkownika (kliknięcie piksela). Nie można więc używać narzędzia do pobierania próbek w tle bez zauważenia przez użytkownika.
• Aby ułatwić użytkownikom zauważenie trybu pipety, przeglądarki muszą wyraźnie go oznaczać. Dlatego po krótkim opóźnieniu zwykły kursor myszy znika, a zamiast niego pojawia się specjalny interfejs użytkownika. Istnieje też opóźnienie między rozpoczęciem trybu pipety i możliwością wybrania przez użytkownika piksela, aby mieć pewność, że użytkownik miał czas zobaczyć lupę.
• Użytkownicy mogą w każdej chwili anulować tryb pipety (naciskając klawisz esc).

Prześlij opinię

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

Prześlij informacje o projektowaniu 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órych potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu bezpieczeństwa? Prześlij problem ze specyfikacją w repozytorium GitHub interfejsu API lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemów z implementacją

Czy wystąpił błąd związany z implementacją 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, proste instrukcje odtwarzania błędu i wpisz Blink>Forms>Color w polu Składniki. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji o powtarzających się problemach.

Pokaż informacje o pomocy dotyczącej interfejsu API

Zamierzasz używać interfejsu EyeDropper API? Twoje publiczne wsparcie pomaga zespołowi Chromium w ustalaniu priorytetów funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest, aby wspierać te funkcje. Wyślij tweeta do @ChromiumDev, używając hashtaga #EyeDropper, i powiedz nam, gdzie i jak z niego korzystasz.

Przydatne linki

• Publiczny film wyjaśniający
• Specyfikacja w wersji roboczej
• Demonstracja interfejsu EyeDropper API | źródło demonstracyjne interfejsu EyeDropper API
• Błąd śledzenia w Chromium
• Wpis na stronie ChromeStatus.com
• Komponent Blink: Blink>Forms>Color
• Sprawdzanie tagów
• Żądanie pozycji WebKit
• Prośba o pozycję w Mozilla
• Zamiar wysyłki

Podziękowania

Interfejs EyeDropper API został określony i wdrożyli go Ionel Popescu z zespołu Microsoft Edge. Ten post został sprawdzony przez Joe Medley.