Извлечение палитры цветов

Как это работает

Ваше изображение отрисовывается на скрытом холсте после уменьшения до максимум 200 пикселей по длинной стороне, потому что уменьшенное изображение сохраняет почти такое же распределение цветов, как оригинал, и читается в тысячи раз быстрее. Из getImageData() извлекаются необработанные RGBA-данные, и любой пиксель с прозрачностью более 50% отбрасывается. Каждый оставшийся пиксель попадает в грубую сетку из 6 уровней на канал — всего 216 корзин, — и каждая корзина хранит сумму реальных значений. Корзины сортируются по количеству пикселей, побеждают верхние N, и каждый образец цвета — это среднее реальных пикселей в своей корзине, а не центр корзины, что не даёт результатам выглядеть искусственно «сглаженными».

Честное ограничение этого подхода: он измеряет площадь, а не важность. Портрет на фоне бежевой стены даст пять оттенков бежевого раньше, чем упомянет синюю куртку человека, просто потому что у стены больше пикселей. Если вам нужны акцентные цвета, а не доминирующие, увеличьте количество цветов и посмотрите ближе к концу списка, либо обрежьте изображение до нужной области перед загрузкой.

Само изображение никогда не покидает ваше устройство: оно загружается через локальный object URL, отрисовывается на холсте в памяти и считывается как байты — всё это в JavaScript этой страницы. Здесь вообще нет шага загрузки, который можно было бы перехватить, и вкладка «Сеть» остаётся пустой, пока вы извлекаете цвета.