Есть сервис подбора цвета для интерьера и экстерьера. В нём выбирается изображение и можно перекрасить часть изображения в выбранный цвет(посмотреть как будет выглядеть цвет).
Занимаюсь созданием подобного функционала. Изначально хотел подкладывать SVG под текстуру, но без режима наложения выглядит как то не очень.
На сервисе есть несколько слоёв canvas:
- слой с основным изображением, оно немного осветлено — с прозрачностью
- слой с маской объекта, изначально маска чёрная
Покопался в обфусцированном коде и получился примерно следующий алгоритм.
- Пользователь выбирает цвет что бы перекрасить объект
- Составляем список непрозрачных пикселей (на основе маски)
- Циклом проходить по каждому пикселю основного изображения и примешиваем к цвету пикселя основного изображения выбранный цвет для перекрашивания.
- Сохраняем значение из предыдущего пункта в canvas с маской
Алгоритм несложный, но может я забыл какую то функцию или упустил более простой вариант реализации.