Интерактивное изменение цвета сегментов изображения

[dmitriy94]

Задача такова:
На сайте клиента должно быть изображение одежды с кликабельными сегментами и элемент для выбора цвета. Пользователь выбирает сегмент изображения и цвет, после этого у выбранного сегмента меняется цвет на выбранный. Вопрос в том, как это реализовать. Хотя бы примерно. Flash отпадает, потому что у него, вроде как, проблемы с отображением на мобильных устройствах. Вся сложность заключается в сегментации изображения. Изображений очень много, и отрисовывать каждый сегмент просто нереально. А если и отрисовывать вручную, то как потом эти сегменты собрать в один файл с кликабельностью каждого. Менять цвет, как я понимаю, можно с помощью Canvas и drawImage. Хотя бы покажите направление, где искать. И вообще, возможно ли это реализовать средствами языка, необязательно JS, можно любым другим скриптовым языком. Спасибо.

[dmitriy94]

Задачу не решил, но появились мысли, как реализовать. Кому интересно, может добавит что-нибудь к этому. В общем, все изображения, как выяснилось, будут сделаны в Corel. В картинке у каждого сегмента нужно провести границы уникального цвета, который больше нигде повторяться не будет, толщиной в 1 пиксель. По сути, изображение - это матрица (массив), значения каждой ячейки которой - какой-либо цвет. В месте, где пользователь кликнет мышкой, будут определены координаты пикселя, от которого нужно будет во все стороны делать перебор координат, распознавая нужные координаты пикселя по его значению, то есть цвету. Это и будут пиксели границы. Нужно будет найти 4 координаты, где граница рядом с выбранным пикселем будет выделяться по расположению сильнее всего. Другими словами, найти наивысшие точки границы. После того, как нашли эти точки, делаем перебор в прямоугольнике где углами будут начальная точка, наивысшая верхняя и боковая. И так должно получиться 4 прямоугольника. Затем все найденные координаты (это и будет граница сегмента) перекрасить в другой цвет (это уже для удобства пользователя, чтобы он видел, какой именно сегмент выбрал). После этого пользователь выбирает цвет, и весь массив пикселей между этими координатами (границами) должен закраситься в этот цвет. Я так полагаю, все это придется делать средствами Canvas и JS. Если просчитывать координаты пикселей самого изображения средствами JS не получится, то можно использовать PHP в связке с Ajax (по-моему, PHP это может), чтобы все это дело было интерактивным. А вот само перекрашивание уже делать средствами JS на Canvas, передавая все координаты, обработанные PHP-скриптом. Как-то так. Конечно, тут может быть очень много подводных камней, особенно в определении координат, но я пока других вариантов не вижу совсем. У кого есть мысли, прошу поделиться. Спасибо.

[Aetae]

Всё можно делать на js в том числе попиксельно.(imageData)
И ты мудришь. К каждому изображению следует просто хранить готовое описание сегментов в векторном виде или в виде изображения-маски(чб), по которому уже накладывать цвет с нужной степенью смешивания.

[dmitriy94]

Изображений будет очень много, и задавать для каждого описание или прописывать маску на CSS слишком затратно по времени (а маску придется задавать для каждого изображения, так как они все разные). Поэтому мне нужен алгоритм, который полностью автоматизирует эту работу. От клиента должна требоваться только отрисовка его изображений с нужными границами, на этом все. А работать потом в коде индивидуально с каждым изображением не реально - сопровождение будет не вечным. Но все равно, огромное спасибо, теперь хотя бы знаю, в какую сторону копать, и стоит ли копать вообще. Благодаря вам, наткнулся на интересную статью на хабре, как раз по этой теме. Кому интересно http://habrahabr.ru/post/233453/

[Aetae]

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

[dmitriy94]

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

[Aetae]

dmitriy94, разницы никакой. Маски делаются при отрисовке и просто сохраняются в отдельный файл. Если конечно работает дизайнер, а не Вася который знает в фотошопе две кнопки.
Вообще вопрос этот должен решаться вами совместно с тем кто будет рисовать. Напридумываете вы сейчас "удобных для рисовальщика" решений, а тот вас проклинать на каждой картинке будет.