javascript — возможно ли нанести текстурную маску на изображение, используя любой веб-язык?

я хочу создать простой интернет-магазин для дверей, и я хочу иметь функцию, где пользовательские двери могут изменять цвет или текстуру. Но я думаю, что единственный способ сделать это — создать отдельные файлы .jpg для всех дверей всех текстур и цветов и изменить их. Есть ли какая-нибудь библиотека или какой-нибудь способ, которым я могу делать маскирование и текстурирование в сети? двери такие:
doortype

и текстура такая:

texture1 texture2

Я создал отдельную базовую дверь, поэтому, если пользователь меняет тип двери, появляется только вышеуказанный слой со специальным стилем и стеклом. но я не могу написать текстурированный стиль и текстурированные двери.

2

Решение

Вы можете сделать что-то вроде этого, используя img и добавить непрозрачность и установить фон для div, который текстурирован

демо — http://jsfiddle.net/wyLtq6hz/

div {
display: inline-block;
background: url(http://i.stack.imgur.com/RnQMf.jpg);
}
div img {
opacity: .8;
vertical-align: middle;
}
<div>
<img src="http://i.stack.imgur.com/glt6A.jpg" />
</div>
2

Другие решения

Вы можете использовать HTML5 canvas для работы с изображениями. Есть несколько библиотек, которые могут вам помочь. Вот учебник от MSDN. SVG также может сделать свое дело. Прочитайте этот вопрос из Stackoverflow. Может быть, это лучший подход. Надеюсь, это поможет вам.

1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector