是否可以使用任何网络语言在图像上放置纹理蒙版？

Question

我想为门创建一个简单的网上商店，我想拥有自定义门用户可以更改颜色或纹理的功能。但我想这样做的唯一方法是为所有纹理和所有颜色的所有门创建单个 .jpg 文件并更改它。有没有任何图书馆或任何方式我可以在网上做掩蔽和纹理？门是这样的：

纹理是这样的：

我已经创建了单独的基本门，因此如果用户正在更改门类型，则只有上面的图层会出现特殊样式和玻璃。但我无法制作纹理化造型和纹理化门。

Answer 1

您可以使用 HTML5 canvas 进行图像处理。有几个图书馆可以为您提供帮助。 Here is a tutorial from MSDN. SVG could also do the trick. Read this question from Whosebug. 也许这是更好的方法。希望对你有帮助。

Answer 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>

是否可以使用任何网络语言在图像上放置纹理蒙版？

is it possible to put texture mask on image using any web language?

html

javascript

css

php

image