0

Есть сервис подбора цвета для интерьера и экстерьера. В нём выбирается изображение и можно перекрасить часть изображения в выбранный цвет(посмотреть как будет выглядеть цвет).

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

На сервисе есть несколько слоёв canvas:

  • слой с основным изображением, оно немного осветлено — с прозрачностью
  • слой с маской объекта, изначально маска чёрная

Покопался в обфусцированном коде и получился примерно следующий алгоритм.

  1. Пользователь выбирает цвет что бы перекрасить объект
  2. Составляем список непрозрачных пикселей (на основе маски)
  3. Циклом проходить по каждому пикселю основного изображения и примешиваем к цвету пикселя основного изображения выбранный цвет для перекрашивания.
  4. Сохраняем значение из предыдущего пункта в canvas с маской

Алгоритм несложный, но может я забыл какую то функцию или упустил более простой вариант реализации.

1 ответ 1

0

В настоящий момент разработал такой алгоритм:

  1. Переводим цвет, в который нужно перекрасить в HSV.
  2. Беру каждый пиксель в canvas на котором расположена часть изображения и записываю количество значений «V» * 100 в объект (для того что бы округлить и получить статистику).
  3. После предыдущего шага получаю объект в котором содержатся количество вхождений значений «V». Нахожу максимальное значение в этом объекте — тем самым получаю основной цвет изображения.
  4. Перекрашиваю каждый пиксель части изображения используя «H» и «S» из шага 1, а «V» получаю по формуле (V шага 1 + (V пикселя оригинального изображения - V максимального в части изображения)).

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.