С новым API EyeDropper в Chromium веб-сайты могут позволить посетителям выбирать цвета из любого места на своем экране, добавляя еще один
функция в Интернете, которая раньше требовала хакерских решений, а теперь представляет собой всего несколько строк кода. API — это
чистый, современный и простой в использовании. В этой статье мы обсудим, как его настроить, обрабатывать крайние случаи и дополнительные функции.
мы надеемся появиться в будущих обновлениях.
Мы следим за API EyeDropper с момента его первого предложения и экспериментируем с ним как с другим
части стали доступны, а также предоставили вводную информацию, пока функция разрабатывалась. В полипане 7
мы начали активно использовать его для новой палитры цветов и новых палитр.
Содержание статьи
Попробуйте
Попробуйте API палитры цветов ниже (Chromium 95 или Polypane 7 и выше).
API EyeDropper не поддерживается. Используйте Polypane или другой браузер на основе Chromium.
Как использовать API EyeDropper
API добавляет новый глобальный, EyeDropper (или window.EyeDropper ), который можно использовать для настройки нового объекта пипетки:
const eyeDropper = новый EyeDropper ( ) ;
Этот объект EyeDropper имеет одна функция, eyeDropper.open () . Это запустит палитру цветов и изменит курсор пользователя.
в палитру цветов с увеличенной областью и выделенным пикселем. Эта функция возвращает обещание, поэтому вы можете
используйте его либо с await либо в качестве обещания.
Одна проблема заключается в том, что он работает только при вызове из события, инициированного пользователем . Это часть модели безопасности, чтобы
запретить веб-сайтам потенциально очищать пиксели без ведома пользователя.
Обнаружение поддержки API EyeDropper
Поскольку API доступен только в Chromium, вам необходимо проверить поддержку перед его использованием. Самый простой
способ сделать это — предложить пользовательский интерфейс выбора цвета только тогда, когда window.EyeDropper не является неопределенным:
if ( окно . EyeDropper ) {
} еще {
}
ожидание версия на основе
const результат = await eyeDropper . открытый ( ) ;
документ . queryselector ( '. colorbutton' )
. addEventListener ( 'click' async ( ) => {
const результат = await eyeDropper . открытый ( ) ;
} ) ;
Вызов eyeDropper.open () разрешится пополам ситуации:
- Пользователь щелкает в любом месте экрана.
- Пользователь нажимает клавишу Esc .
В последнем В ситуации eyeDropper вызовет исключение, но в первой ситуации вы получите ColorSelectionResult
объект, который имеет свойство sRGBHex содержащее выбранный цвет в шестнадцатеричном формате. В своем коде вы можете проверить, есть ли
result.sRGBHex определяется, а затем делайте с ним что хотите.
документ . queryselector ( '. Colorbutton' )
. addEventListener ( 'click' async ( ) => {
const результат = await eyeDropper . открытый ( ) ;
if ( результат . sRGBHex ) {
консоль . журнал ( результат . sRGBHex ) ;
}
} ) ;
У вас нет для обработки исключения, но если вы хотели сообщить пользователям, что они отменили пипетку,
вам нужно добавить try .. catch в код:
документ . queryselector ( '. Colorbutton' )
. addEventListener ( 'click' async ( ) => {
попробуйте {
const результат = await eyeDropper . открытый ( ) ;
if ( результат . sRGBHex ) {
консоль . журнал ( результат . sRGBHex ) ;
}
} улов ( e ) {
консоль . журнал ( e ) ;
}
} ) ;
Версия на основе обещаний
Вам не нужно использовать ожидает версия. eyeDropper.open () возвращает обещание, поэтому добавление .then () и .catch () также работает:
документ . queryselector ( '. Colorbutton' )
. addEventListener ( 'щелкните' ( ) => {
пипетка
. открытый ( )
. затем ( ( результат ) => {
консоль . журнал ( результат . sRGBHex ) ;
} )
. улов ( ( e ) => {
консоль . журнал ( e ) ;
} ) ;
} ) ;
Что нужно помнить при использовании EyeDropper API
Там две ошибки с API, по крайней мере, поскольку он в настоящее время реализован в Chromium, мы обнаружили, что вам следует
имейте в виду.
Выбор цвета не использует экран в реальном времени
По крайней мере, в текущей реализации палитра цветов получает пиксели, как показано на экране, когда вы вызываете .open () .
Это означает, что если вы воспроизводите видео, палитра цветов покажет пиксели кадра, который был виден тогда, а не
живое видео.
Это зависит от реализации, и мы надеемся, что в будущем обновлении Chromium будут доступны данные в реальном времени.
Выбор цвета работает только в результате действия пользователя
Как упоминалось ранее, для открытия пипетки требуется инициированное пользователем событие. Это сделано для того, чтобы сайты не открывали
пользовательский интерфейс пипетки, чтобы начать очистку экрана сразу при загрузке. Вместо этого пользователю нужно выполнить действие, чтобы API работал,
как щелчок или нажатие клавиши.
Функции, которые мы хотим видеть добавленными
API EyeDropper все еще очень молодой и минимальный. Во время нашей реализации мы столкнулись с рядом функций, которые мы
хотел бы видеть добавление к API в будущих обновлениях.
Предварительный просмотр зависшего цвета
Основным компонентом многих пипеток, например, в инструментах дизайна, является то, что они также показывают образец предварительного просмотра
завис цвет. Вы можете использовать это, чтобы сравнить его с другим образцом или быстро проверить HEX-код. Текущий API не
предложите это по соображениям безопасности. Для этого мы зарегистрировали проблему с API EyeDropper на GitHub: № 6. Необходима обратная связь в реальном времени.
Более обширная цветовая модель
В настоящее время все цвета возвращаются в цветовой модели sRGB. Это означает, что API не будет точно возвращать цвета за пределами
спектр sRGB, например, на экранах Apple P3. Как с этим бороться — открытый вопрос.
Также ведется работа над новым Color API для Интернета. API EyeDropper может использовать
этот Color API, когда он появится в будущих версиях браузеров.
Более естественный способ выбора нескольких цветов
Из-за текущей модели безопасности каждый раз, когда пользователь выбирает цвет, который ему нужно изменить — инициировать действие пользователя, которое может быть утомительным.
Например, если вы хотите создать палитру цветов за один раз, вы хотите начать выбирать цвета, щелкните все цвета, которые вы
хотите добавить, а затем закрыть пипетку. Мы аналогичным образом разместили проблему для этого на Github: # 9 Ожидаем ли мы, что мультиселект будет работать? и эта функция в настоящее время рассматривается.
Для этого было бы неплохо, если бы мы могли обозначить часть страницы (например, кнопку) как область, в которой находится EyeDropper
не работает, вместо этого работает как кнопка «Готово». Таким образом, пользователи могут выбрать несколько цветов, а затем щелкнуть
кнопку, когда они будут готовы.
Другие браузеры
На данный момент API доступен только в браузерах на основе Chromium, начиная с версии 95, и не было сигнала от
Safari и Firefox пока нет. Если вы хотите, чтобы эти браузеры также поддерживали API EyeDropper, добавьте свою поддержку к открытым вопросам:
Проблема № 1728527 для Firefox и Проблема № 229755 для Safari.
API EyeDropper — хорошее дополнение к браузеру, которое, как мы надеемся, появится в большем количестве браузеров. Мы эффективно используем это
в Polypane и хотел бы, чтобы он получил дальнейшее развитие.
Загрузка...
