Изменение цвета объекта на изображении [закрыт]

179
18 апреля 2019, 01:40

Например у меня есть изображение

Мне необходимо сделать так чтобы я со своей палитры мог изменить цвет кухонного гарнитура и при этом не меняя цвет всего изображения. Как и с помощью чего это можно реализовать?

Answer 1

Как отправная точка, для вдохновения и, просто, чтобы ответы не пустые были:

img, input { 
  position: absolute; 
} 
.color { 
  z-index: 1; 
  --module-color: 0deg; 
  -webkit-filter: hue-rotate(var(--module-color)); 
  filter: hue-rotate(var(--module-color)); 
  -webkit-clip-path: polygon(314px 24px, 330px 24px, 329px 147px, 326px 129px, 315px 132px, 303px 130px, 300px 161px, 301px 164px, 302px 169px, 299px 169px, 299px 167px, 295px 166px, 291px 151px, 289px 137px, 284px 139px, 273px 139px, 268px 137px, 269px 141px, 272px 164px, 89px 177px, 89px 187px, 83px 188px, 83px 124px, 279px 119px, 300px 121px, 300px 86px, 261px 86px, 261px 116px, 258px 116px, 258px 86px, 84px 83px, 84px 62px, 83px 58px, 81px 55px, 80px 53px, 74px 53px, 74px 28px, 80px 24px, 200px 33px, 200px 37px, 194px 40px, 156px 37px, 155px 56px, 200px 56px, 200px 62px, 156px 61px, 156px 81px, 200px 81px, 199px 83px, 248px 84px, 301px 82px, 330px 82px, 330px 54px, 289px 59px, 268px 59px, 268px 34px, 311px 25px); 
  clip-path: polygon(314px 24px, 330px 24px, 329px 147px, 326px 129px, 315px 132px, 303px 130px, 300px 161px, 301px 164px, 302px 169px, 299px 169px, 299px 167px, 295px 166px, 291px 151px, 289px 137px, 284px 139px, 273px 139px, 268px 137px, 269px 141px, 272px 164px, 89px 177px, 89px 187px, 83px 188px, 83px 124px, 279px 119px, 300px 121px, 300px 86px, 261px 86px, 261px 116px, 258px 116px, 258px 86px, 84px 83px, 84px 62px, 83px 58px, 81px 55px, 80px 53px, 74px 53px, 74px 28px, 80px 24px, 200px 33px, 200px 37px, 194px 40px, 156px 37px, 155px 56px, 200px 56px, 200px 62px, 156px 61px, 156px 81px, 200px 81px, 199px 83px, 248px 84px, 301px 82px, 330px 82px, 330px 54px, 289px 59px, 268px 59px, 268px 34px, 311px 25px); 
} 
input[type="range"] { 
  width: 395px; 
  z-index: 1; 
}
<img class="color" src="https://i.stack.imgur.com/uvE4w.jpg"><img src="https://i.stack.imgur.com/uvE4w.jpg"> 
<input type="range" min="0" max="360" oninput="document.querySelector('img').style.setProperty('--module-color', this.value + 'deg');" value="0">

Answer 2

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

filter: hue-rotate(90deg);

READ ALSO
Можно ли в JS вывести содержимое папки?
javascript

Можно ли в JS вывести содержимое папки?

Задача: создать некий FolderViewerМорда такая:

 110
Загрузить контент страницы через Ajax
javascript

Загрузить контент страницы через Ajax

Мне нужно загрузить статью на сайт с помощью Ajax, в инете есть следующий пример: Создадим 3 файлаindex

 138
Замена значений атрибута value тега input
javascript

Замена значений атрибута value тега input

разбираюсь с api интернет-эквайринга, для успешной отправки формы необходимо передать параметр receipt, у которого есть ряд обязательных значенийВыглядит...

 122
mariadb - отсутствует /usr/share/mariadb/russian
MySQL

mariadb - отсутствует /usr/share/mariadb/russian

В GNU Linux установил mariadb-server в lxc контейнере Fedora 28 amd64 командой dnf install mariadb-server, перед этим установил glibc-langpack-ru

 131