Ищу технологию - изменение цвета в изображении

[MC-XOBAHCK]

Здравствуйте!
Подскажите, как изменять цвет в изображении?
Где то в докладах по js слышал упоминание, что в картинках можно изменять цвет и делать это не сложно. Там у спикера и примеры были, но я решал свою проблему и не стал тогда разбираться. Теперь не могу вспомнить источник где я это слышал.

Например в интернет магазине - модель телефона с чёрным, белым и золотым корпусом. Для всех цветов корпуса используется только одно изображение, а цвет корпуса меняется при помощи технологии что я ищу. То есть, стоит изображение, а под ним чёрная, белая и золотая точка (или квадратик). При клике на эту цветную точку на изображении телефона меняется цвет корпуса согласно выбранного цвета, при этом само изображение не меняется.

Как это реализовуется? Подскажите пожалуйста эту технологию.

[laimas]

цвет корпуса меняется при помощи технологии

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

Можно менять подготовленные изображения или же перекрывать их части, можно работать с изображением по маске, но все упирается в исходник.

[SuperZen]

можно сделать, но методы есть разные, либо менять само изображение (байты), или накладывать фильтры css/canvas

наверное самый простой:
* https://developer.mozilla.org/en-US/...ntext2D/filter
* https://html5book.ru/css3-filtry/

[j0hnik]

MC-XOBAHCK,
SVG фильтры
https://html5.by/blog/svg-filters/

[MC-XOBAHCK]

Если же изображение в индексированной палитре, то там проще, достаточно изменить цвет только индекса и все пиксели изображения примут новый цвет

laimas, похоже это то что мне нужно. Как это сделать? Если нет примера или ссылки, пожалуйста - подскажите по каким запросам гуглить.

[laimas]

Как это сделать?

Достаточно прочесть об индексированной палитре, но учтите, у вас изображения при этом могут быть либо GIF, либо PNG8, максимальное количество цветов 256. В отличие от полноцветных изображений, в которых цвет каждого пикселя описывается байтом (или более), в индексированной палитре цвета содержащие в изображении имеют индексы, которые описаны в палитре (в фотошопе для веб приготовьте что либо и вы увидите палитру, в которой можно и удалять что-то из цветов). Меняете в палитре у индекса цвет, все пиксели с этим индексом раскрасятся в него. Это как светофор с зеленого на красный.

Ищите в сети, всего пересказывать некогда, а ссылок на все в уме я не держу. Но учтите, что canvas для JS слегка убогий и он не работает с индексированной палитрой.

[рони]

MC-XOBAHCK,
http://jsfiddle.net/gwF6h/
https://github.com/manuelro/canvas-image-hue

[MC-XOBAHCK]

рони, Круто!

Спасибо всем за ссылки! Вроде ознакомился. Буду пробовать.