Выбор цвета любого пикселя на экране с помощью API EyeDropper

API EyeDropper позволяет авторам использовать предоставляемый браузером инструмент «пипетка» для создания пользовательских палитр цветов.

Патрик Броссе
Patrick Brosset
Homepage
Томас Штайнер

Что такое API EyeDropper?

Many creative applications allow users to pick colors from parts of the app window or even from the entire screen, typically using an eyedropper metaphor.

Например, Photoshop позволяет пользователям выбирать цвета прямо с холста, чтобы им не приходилось гадать и рисковать ошибиться. В PowerPoint также есть инструмент «пипетка», полезный при настройке цвета контура или заливки фигуры. Даже в Chromium DevTools есть пипетка, которую можно использовать при редактировании цветов на панели стилей CSS, так что вам не нужно запоминать или копировать код цвета откуда-либо еще.

Если вы создаёте креативное приложение с использованием веб-технологий, вам может понадобиться предоставить пользователям аналогичную функцию. Однако реализовать это в веб-среде сложно, если вообще возможно, особенно если вам нужно получить образцы цветов со всего экрана устройства (например, из другого приложения), а не только с текущей вкладки браузера. В браузере нет встроенного инструмента «пипетка», который веб-приложения могли бы использовать для своих нужд.

Элемент <input type="color"> близок к этому. В браузерах на основе Chromium, работающих на настольных устройствах, он предоставляет удобную пипетку в выпадающем списке выбора цвета. Однако использование этого элемента означает, что вашему приложению придется настраивать его с помощью CSS и обернуть в небольшой фрагмент JavaScript, чтобы сделать его доступным для других частей вашего приложения. Выбор этого варианта также означает, что другие браузеры не будут иметь доступа к этой функции.

API EyeDropper заполняет этот пробел, предоставляя способ получения образцов цветов с экрана.

Цветовая палитра Chromium.

Как использовать API EyeDropper

Поддержка браузеров

Browser Support

  • Chrome: 95.
  • Край: 95.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

Определение функций и поддержка браузеров

Во-первых, убедитесь, что API доступен, прежде чем его использовать.

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

API EyeDropper поддерживается в браузерах на основе Chromium, таких как Edge или Chrome, начиная с версии 95.

Использование API

Для использования API создайте объект EyeDropper , а затем вызовите его метод open() .

const eyeDropper = new EyeDropper();

Метод open() возвращает промис, который разрешается после того, как пользователь выберет пиксель на экране, а разрешенное значение предоставляет доступ к цвету пикселя в формате sRGBHex ( #RRGGBB ). Промис отклоняется, если пользователь выходит из режима пипетки, нажав клавишу 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.
}

Код приложения также может отменить режим «пипетки». Это может пригодиться, если состояние приложения существенно изменится. Например, появится всплывающее диалоговое окно, требующее ввода данных от пользователя. В этот момент режим «пипетки» следует остановить.

To cancel the eyedropper, you can use an AbortController object's signal and pass it to the open() method.

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

В итоге, ниже вы найдете многократно используемую асинхронную функцию:

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

Попробуйте!

Откройте одну из демонстрационных версий EyeDropper , используя Microsoft Edge или Google Chrome 95 или более поздней версии, на Windows или Mac.

Попробуйте, например, демоверсию игры с цветами . Нажмите кнопку «Играть» и за ограниченное время попытайтесь выбрать цвет из списка внизу, который совпадает с цветом квадрата вверху.

Демонстрационная версия игры с цветами.

Вопросы конфиденциальности и безопасности

За этим, казалось бы, простым веб-API скрывается потенциально опасная проблема конфиденциальности и безопасности. Что, если вредоносный веб-сайт сможет начать видеть пиксели с вашего экрана?

To address this concern, the API specification requires the following measures:

  • Во-первых, API фактически не позволяет запустить режим «пипетки» без намерения пользователя. Метод open() может быть вызван только в ответ на действие пользователя (например, нажатие кнопки).
  • Во-вторых, без намерения пользователя получить информацию о пикселях невозможно. Промис, возвращаемый функцией open() разрешается в значение цвета только в ответ на действие пользователя (щелчок по пикселю). Поэтому пипетку нельзя использовать в фоновом режиме, не заметив этого.
  • Чтобы пользователи могли легко заметить режим «пипетки», браузеры должны сделать этот режим очевидным. Именно поэтому обычный курсор мыши исчезает через небольшую задержку, и вместо него появляется специальный пользовательский интерфейс. Также существует задержка между моментом запуска режима «пипетки» и моментом, когда пользователь может выбрать пиксель, чтобы убедиться, что у пользователя было время увидеть увеличительное стекло.
  • Наконец, пользователи могут в любой момент отключить режим пипетки (нажав клавишу Esc ).

Обратная связь

The Chromium team wants to hear about your experiences with the EyeDropper API.

Расскажите о проектировании API.

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности? Создайте заявку в репозитории API на GitHub или добавьте свои мысли к существующей заявке.

Сообщить о проблеме с реализацией

Вы обнаружили ошибку в реализации Chromium? Или реализация отличается от спецификации? Сообщите об ошибке на new.crbug.com . Обязательно укажите как можно больше подробностей, простые инструкции по воспроизведению и введите Blink>Forms>Color в поле Components .

Показать поддержку API

Планируете ли вы использовать API EyeDropper? Ваша публичная поддержка помогает команде Chromium расставлять приоритеты в разработке новых функций и показывает другим разработчикам браузеров, насколько важно их поддерживать. Отправьте твит @ChromiumDev с хэштегом #EyeDropper и расскажите нам, где и как вы его используете.

Полезные ссылки

Благодарности

API EyeDropper был разработан и реализован Ионелом Попеску из команды Microsoft Edge. Данная публикация была проверена Джо Медли .