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

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

Patrick Brosset

Thomas Steiner

Что такое API EyeDropper?

Многие творческие приложения позволяют пользователям выбирать цвета из частей окна приложения или даже со всего экрана, обычно используя метафору пипетки.

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

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

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

API EyeDropper заполняет этот пробел, предоставляя возможность брать образцы цветов с экрана.

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

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

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

Прежде чем использовать 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.
}

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

Чтобы отменить пипетку, вы можете использовать сигнал объекта AbortController и передать его методу 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();

Собрав все это вместе, ниже вы можете найти многоразовую асинхронную функцию:

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

Попробуйте!

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

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

Соображения конфиденциальности и безопасности

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

Чтобы решить эту проблему, спецификация API требует следующих мер:

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

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

Команда Chromium хочет услышать о вашем опыте работы с API EyeDropper.

Расскажите нам о дизайне API

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

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

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

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

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

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

• Публичный объяснитель
• Проект спецификации
• Демонстрация API EyeDropper | Исходный код демонстрации API EyeDropper
• Ошибка отслеживания в Chrome
• Запись ChromeStatus.com
• Компонент Blink: Blink>Forms>Color
• Обзор тегов
• Запрос позиции WebKit
• Запрос позиции Mozilla
• Намерение отправить

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

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