Средний фон изображения

Средний фон изображения на JavaScript

5 (100%) 2 vote[s]

Часто нужно быстро определить средний фон изображения для подставки в background. Как вариант — инструмент, который работает с canvas и высчитывает средний фон изображения несколькими алгоритмами (квадратичный — по умолчанию).

Автор использовал этот алгоритм для «листалок», ну а в качестве инструмента для быстрого подбора фона для фото — тоже вариант. В репозитории (ссылка внизу) есть много примеров, которые можно посмотреть и попробовать применить для своих целей. Есть вариант с цветной тенью, обработка видео, цветные широкие border (реализовано при помощи padding) и много чего ещё…

В третьем варианте, представленном здесь (выбор алгоритмы вычисления среднего фона — простого, sqrt (по умолчанию) и доминирующего), мы только изменили алгоритм добавления элементов в DOM, так как в оригинальной версии пользовательская картинка при загрузке не заменялась, а добавлялась, что для нас не нужно. Max-size загружаемого изображения — 800kB (чем больше размер, тем медленнее ваш браузер будет считать — в данном виде приложение работает в браузере). Работает с Node.js.

Здесь вы можете загрузить и протестировать ваше изображение
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Здесь вы можете загрузить и протестировать ваше изображение
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Выберите изображение, чтобы определить средний цвет:
Или фото из камеры.

Сравнение алгоритмов по двум цветам — примеры (простой алгоритм  (c1+c2)/2 даёт более темный цвет, чем квадратичный sqrt((c1^2+c2^2)/2)).

Больше примеров — в оригинале кода на GitHub и демо.

Автор fast-average-color: Denis Seleznev MIT License

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 459

Популярные записи