Получите доминирующий цвет определенной области изображения: цветовой запрос для элементов веб-страницы

Question

Описание проблемы

Я пишу Java-приложение, которое позволяет программистам запрашивать элементы страницы на веб-странице, указывая видимые атрибуты.Одним из наиболее важных и сложных является Цвет .

Чтобы быть точным, мне нужен способ получить видимый пользователем цвет элементов веб-страницы с использованием Selenium 2и вебдрайвер.Я хочу иметь возможность запрашивать значения цвета (#ff0000) или имена (red).

Один параметр должен контролировать процентное соотношение похожих цветов, необходимое для " доминирования "довольно.Если установлено значение 100%, элемент не может иметь любой другой цвет.Если установлено значение 50%, элемент должен быть наполовину заполнен цветом.

Должен быть другой параметр для управления " допуском " этих цветов.С более высоким допуском red может также соответствовать оранжевой кнопке «Задать вопрос» здесь, в Stackoverflow.

Пример

Учитывая хорошо известную веб-страницу Stackoverflow, я выделил элемент страницы, чтобыcheck: При более высокой толерантности к цвету и не слишком высоком проценте доминирования следующие запросы должны возвращать указанный результат:

color('#FFEFC6') // exact match: true
color('yellow') // match in tolerance range: true
color('orange') // true
color('blue') // false
color('green') // false

Мой первый подход

Лучшая ставка будет использоватьCSS-атрибуты, такие как color и background-color.Но они не учитывают изображения, которые необходимы для хороших цветовых запросов.Кроме того, они могут создавать трудности из-за наследования селектора CSS и обработки прозрачности.Кроме того, абсолютно позиционированные элементы с более высоким z-index выше текущего элемента могут привести к неожиданным результатам.

Приведен элемент веб-страницы для проверки.Он представлен как элемент DOM JavaScript (или объект JQuery) или как RemoteWebElement в привязках Java Webdriver.

Можно делать автоматические снимки экрана с текущим состоянием веб-страницы (я используюFirefox), см. Здесь: Сделайте снимок экрана с Selenium WebDriver

Координаты проверяемого элемента страницы известны.Поэтому снимок экрана может быть обрезан до этого размера и площади и каким-то образом проанализирован, чтобы проверить, возвращает ли запрос значение true или false.

Реализация

В этом случае я не ограничен Java. JavaScript было бы очень хорошо, потому что я выполняю другие запросы также с помощью JQuery.Производительность имеет значение.Я рассчитываю на вас, боюсь, это очень сложная задача.Поэтому мне нужен ваш ввод.

ОБНОВЛЕНИЕ

Я решил эту проблему, сделав снимки экрана и проанализировав данные пикселей соответствующей части.Таким образом, я могу иметь дело со всеми видами фоновых изображений и прозрачности.Это часть инфраструктуры Abmash, которая имеет открытый исходный код и бесплатна для использования: Abmash на Github

Answer 1

Самый простой способ:

• Получить скриншот (сохранить в памяти)
• Обрезать снимок экрана до элемента top = el.offsetTop, left = el.offsetLeft, width = el.offsetWidth, height = el.offsetHeight
• Получить данные пикселей для обрезанного изображения
• Переберите пиксели, получив общую сумму элементов R, G, B, затем разделите общую сумму на количество пикселей, чтобы получить среднее значение. Проверьте средний цвет по вашим ограничениям.

Если вы действительно хотите использовать JavaScript

• Вы можете отправить данные пикселей в JavaScript для обработки, если вы собираетесь выполнить окончательную проверку в JavaScript.
• Или вы можете отправить JavaScript URI ИЗОБРАЖЕНИЯ для обрезанного изображения. Затем нарисуйте это IMG на холсте, затем переберите пиксель с помощью ctx2d.getImageData (...)

Делайте выше, только если элемент является IMG или имеет CSS-фоновое изображение. В противном случае используйте CSS и цветовые проверки фона.