EyeDropper

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из самых распространённых браузеров.

Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS), в некоторых или во всех поддерживающих браузерах.

Экспериментальная: Это экспериментальная технология
Перед использованием в производстве внимательно изучите таблицу совместимости с браузерами.

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

Конструктор

EyeDropper() Экспериментальная: Возвращает новый экземпляр EyeDropper.

Методы экземпляра

Интерфейс EyeDropper не наследует никаких методов.

EyeDropper.open() Экспериментальная: Возвращает промис, который разрешается объектом, предоставляющим доступ к выбранному цвету.

Примеры

Открытие инструмента пипетки и выбор цвета

Этот пример демонстрирует, как открыть инструмент пипетки и дождаться, пока пользователь выберет пиксель на экране или нажмёт Escape для отмены режима пипетки.

HTML

<button id="start-button">Open the eyedropper</button> <span id="result"></span>

JavaScript

document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});

Результат

Прерывание режима пипетки

Этот пример показывает, что режим пипетки также можно прервать до того, как пользователь выбрал цвет или нажал Escape.

HTML

<button id="start-button">Open the eyedropper</button> <span id="result"></span>

JavaScript

document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "Your browser does not support the EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});

Результат

Спецификации

Спецификация
EyeDropper API # eyedropper-interface

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`EyeDropper`	95	95	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет
`EyeDropper`	95	95	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет
`open`	95	95	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет
`secure_context_required`	96	96	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper