Как сделать окрашивание области изображения в html?

Question

[Pollimos]

Подскажите, как реализовать на сайте следующую задачу:

Есть изображение. В нем расположен продукт (товар). У товара есть несколько цветовых вариантов. Цвета расположены в виде палитры рядом с изображением.
Задача: менять цвет продукта (заданной области на изображении) кликом на соответствующий цвет в палитре.

Answer 1

[Stanislav Gorovoy]

Какой там html у этого блока?

Answer 2

[Дмитрий Ковальский]

Постановка задачи немного не полна, а соответственно решений тоже может быть масса. Можно хранить набор изображений со стилем именования "ProdictId_ProductColor" и по клику на цвет - подменять src изображения на нужный. Или вы хотите именно перерисовывать Canvas?
Я бы для начала уточнил что у вас есть. Каталог товаров и список доступных цветов?

Answer 3

[GreatRash]

beej.us/blog/data/html5s-canvas-2-pixel

Answer 4

[Pollimos]

GreatRash, вот механика работы: defrance.by/tseny-prajs/podbor-zveta - цветовой калькулятор. тыкаем по цвету и область изображения окрашивается

Comments

[GreatRash]

Ну прекрасно. Вырезаем потолок, десатурируем его, а дальше окрашиваем в нужные цвета. Как работать с пикселями в канвасе написано в статье, которую я приложил. А дальше простая математика (можно погуглить "canvas saturate image").