Цвет основного кластера изображения Javascript - PullRequest
3 голосов
/ 25 июля 2011

Я ищу способ с помощью javascript найти основной цвет изображения. Вероятно, через какой-то алгоритм для кластеризации некоторых областей.

Проблема, потому что, если я использую пиксель, будет считаться больше используемых пикселей. Ex. если у меня есть коричневый и очень цвета рядом с коричневым, то часть с белым. основной цвет может быть белым. И не хочу среднего цвета, потому что не может представлять реальный цвет изображения.

Любое предложение плагинов, кода для реализации, веб-сайтов. Заранее спасибо

UPDATE

Примерно так:

http://www.cssdrive.com/imagepalette/

Здесь есть кое-что объясняющее, не уверен, смогу ли я повторно использовать код js.

http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/

1 Ответ

3 голосов
/ 25 июля 2011

Это сложно, но выполнимо.

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

Теперь вы можете применить алгоритм к пиксельным данным, чтобы найти «основной» цвет. Самый простой вариант - средний, но, похоже, вы этого не хотите. Есть много алгоритмов кластеризации там; вероятно, вам нужно выполнить квантование цвета , чтобы уменьшить количество цветов в палитре до некоторого небольшого числа, а затем выбрать цвет, представляющий наибольшее количество пикселей в изображении.

Алгоритм медианного среза является хорошим, относительно простым вариантом, хотя он все еще требует большого количества кода. Я работал над небольшим хобби-проектом по реализации этого алгоритма в Javascript - вы можете посмотреть мой код здесь . Это не будет работать для вас из коробки, но я, вероятно, сделал большую часть тяжелой работы для вас.

...