D.iK.iJ / JavaScript примеры / Скрипт простого полученя среднего или основного цвета картинки [скачать]


Скрипт помещает изображение в canvas 2 на 2 пикселя и получает цвета верхнего левого и нижнего правого угла и усредняет их.
Одно из самых быстрых решений. Я пробовал использовать изображение 1 на 1 пиксель, но это часто не работает. А если брать только верхний угол и не усреднять, фон получается слишком яркий, так как на многих фотографиях сверху - небо.

Нажмите на картинки для смены фона сайта (убрать фон текста, уменьшить или вернуть фон):

Выше по клику будет фон с градиентом, ниже - БЕЗ градиента (усредненный):

Фон с градиентом всем хорош, но к нему нельзя применить анимациии перехода через transition. Только через прозрачность.
Для примера в скрипте стоит прозрачность 0.9 в rgba. Да, можно было перевести в hex цвета, можно было использовать rgb (для старых браузеров). Но я не стал. Так будет симпатичнее.