Выбор цвета любого пикселя на экране с помощью 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 в поле Components .

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

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

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

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

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

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