Изучение API Eyedropper

Eyedropper API приземлился в Chrome и Edge 95 ! Это простой API на основе обещаний, который позволяет выбирать цвет из любого места на экране. Давайте погрузимся и посмотрим, как это работает.

Для начала мы добавим кнопку, которая активирует капельницу.

Select a color

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

const button = document.querySelector('button');

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();

  button.addEventListener('click', () => {
    eyeDropper
      .open()
      .then(colorSelectionResult => {
        document.body.style.backgroundColor = colorSelectionResult.sRGBHex;
      })
      .catch(() => {
        // The user canceled selection
      });
  });
} else {
  // The EyeDropper API isn't supported
}

Сломав его

Вот что происходит в приведенном выше коде:

1. Офункция получения API
2. Создать экземпляр объекта Eyedropper
3. Слушайте кнопку нажатия
4. Позвоните The Eye Dropper open () Метод, который возвращает Обещать
5. Подождите, пока обещание разрешить (пользователь выбрал цвет) или отклонить (отменен пользователь отменен)
6. При Resolve, возьмите шестигранное значение и установите фон
7. При отказе ничего не делать (пустой catch предотвратит ошибку, попавшую в консоли)

Обратите внимание, как я определяю функции API Eyedropper. Это важно, потому что на момент написания этой статьи Firefox и Safari не поддерживают его. Это не значит, что вы не можете использовать API для постепенного улучшения опыта ваших пользователей!

Например, я использую его в Shoelace’s Color Sicker Чтобы показать капельницу, если API доступен. В противном случае я не показываю капельницу, но все остальное все еще работает.

Другой пример

Я поднял еще один пример, который немного более практично. Играйте с этим и дайте мне знать, что вы думаете!

Этот пост изначально появился на Блог автора .

Оригинал: “https://dev.to/claviska/exploring-the-eyedropper-api-4dk7”