Часто нужно быстро определить средний фон изображения для подставки в background. Как вариант — инструмент, который работает с canvas и высчитывает средний фон изображения несколькими алгоритмами (квадратичный — по умолчанию).
Автор использовал этот алгоритм для «листалок», ну а в качестве инструмента для быстрого подбора фона для фото — тоже вариант. В репозитории (ссылка внизу) есть много примеров, которые можно посмотреть и попробовать применить для своих целей. Есть вариант с цветной тенью, обработка видео, цветные широкие border (реализовано при помощи padding) и много чего ещё…
В третьем варианте, представленном здесь (выбор алгоритмы вычисления среднего фона — простого, sqrt (по умолчанию) и доминирующего), мы только изменили алгоритм добавления элементов в DOM, так как в оригинальной версии пользовательская картинка при загрузке не заменялась, а добавлялась, что для нас не нужно. Max-size загружаемого изображения — 800kB (чем больше размер, тем медленнее ваш браузер будет считать — в данном виде приложение работает в браузере). Работает с Node.js.
Или фото из камеры.
Сравнение алгоритмов по двум цветам — примеры (простой алгоритм (c1+c2)/2 даёт более темный цвет, чем квадратичный sqrt((c1^2+c2^2)/2)).
Больше примеров — в оригинале кода на GitHub и демо.
Автор fast-average-color: Denis Seleznev MIT License
Читайте больше по теме:
