Мобильная версия
Мне нужно использовать HTML, CSS и JavaScript, чтобы изменить цвет этой рубашки с помощью палитры цветов на странице. Бесконечный выбор цвета и живое обновление. Я знаю, что мне нужно настроить HSL отдельного изображения, которое накладывается точно на «основное» изображение — это «накладываемое изображение» должно быть ТОЛЬКО рубашкой и ничем больше... но я получаю много противоречивой информации о предварительной обработке этого «наложенного» изображения и о том, какое смешивание цветов мне следует использовать.
Я просмотрел в Википедии режимы наложения и несколько видеороликов на YouTube, но они в основном противоречат друг другу.
/>Нужно ли мне сделать это «наложенное» изображение «черно-белым» и использовать версию в оттенках серого, а затем использовать определенный режим наложения с цветом, выбранным из палитры, чтобы изменить цвет рубашки, сохраняя при этом все тени и эффекты «реализма»?
Или изображение должно состоять из значений одного цвета, а затем объединяться со значениями HSL и определенным цветовым режимом наложения для получения наилучших результатов.
Или это необходимо может быть что-то еще, чего я еще не обнаружил?
Я пробовал использовать бесплатный онлайн-редактор изображений (Canva), чтобы проверить это, но в конечном итоге получаю плоские цвета, которые не выглядят «настоящими» и уничтожают большую часть реализма и затенения рубашки. В некоторых предложениях говорится об изменении оттенка и насыщенности, но как это сделать с помощью JavaScript «автоматическим» способом на основе цвета с помощью палитры цветов — это то, с чем я не могу справиться в одиночку.
Чтобы увидеть пример в html, css и js, который совершенно НЕ то, что я пытаюсь сделать, посмотрите на это:
css-tricks цвета фильтра изображения
Это ничего не дает близко к реалистичному изменению цвета.
Думаю, я пытаюсь имитировать эффекты из этого видео на YT:
Как изменить цвет в фотошопе – YouTube
Я уверен, что сайты электронной коммерции, такие как Wayfair и другие, которые делают это, и делают это довольно хорошо, просто используют для этого JavaScript, но я не могу найти никакой достоверной информации.
ETA: Если это так было не совсем очевидно, это должно быть сделано на веб-странице и позволить пользователю использовать ПАРАМЕТР ЦВЕТА для выбора ЛЮБОГО ВОЗМОЖНОГО цвета - поэтому фотографировать все возможные цвета физического объекта не только нелепо, но и невозможно.
Это должно быть динамично и живо. Я понимаю, что CSS не может этого сделать (о чем свидетельствует ссылка выше), поэтому это нужно делать только на JavaScript и/или HTML, но я не знаю, возможно ли это, и что не менее важно: если это возможно, что мне нужно сделать с «наложенным изображением» и режимами наложения, чтобы оно заработало?
Подробнее здесь: https://stackoverflow.com/questions/798 ... ed-to-make
