Как получить средний или основной цвет из изображения при помощи JavaSript?
В общем, публикация товаров в Фейсбуке, Ebay и АлиЭкспресс меня настолько утомила, что я решил отдохнуть и немного заняться программированием. Для начала, сменил старый скрипт выделения и копирования на сайте (на менее злой). А потом решил чуть облагородить просмотр фото и сделать его более похожим на тот, что у Твиттера.
Да, у них при просмотре фото фон самого просмотрщика становится усредненным цветом картинки. Скорее всего, они делают это на PHP, но мне нужен был простой и быстрый ДжаваСкрипт. И такой нашелся!.. Хотя, если быть честным, довольно большую часть мне пришлось написать самому. Почму? Давайте посмотрим вместе.
«Цитата: Для нахождения среднего цвета изображения:
1) Поместите изображение на Canvas;
2) Измените размер изображения до 1px на 1px;
3) Получите цвет результирующего пикселя.»
И все скрипты или берут именно 1 на 1 пиксель, что у меня работало с переменным успехом, выдавая иногда полную ерунду. Или что-то мудрят, обсчитывая вообще все пиксели на изображении. Что вызывает определенные тормоза в работе.
Поэтому я долго возился, но сделал свой скрипт. Использую 2 на 2 пикселя и беру или градиент от одного до другого или среднее между ними. Так значения получаются более адекватными и не такими яркими, как если брать просто левый верхний угол картинки (там ведь обычно яркое небо).
Очень хотелось использовать в моем просмотрщике фото градиент, но... все как всегда. Браузеры не поддерживают анимацию через transition для него. А еще, у меня на сайте очень много ярких картинок с текстом. Поэтому я решил обнулять все цвета RGBa, хоть один канал которых превышает 200. Да и для защиты от ошибок это тоже неплохо подойдет.
