我正在寻找一种解决方案,用于更改产品的纹理/图案。
目前我有以下材料:
1. 一张透明背景的沙发.png图片
2. 一张织物纹理的.png图片
以下是相关代码:
目前我有以下材料:
1. 一张透明背景的沙发.png图片
![enter image description here](https://istack.dev59.com/tHXPP.webp)
![enter image description here](https://istack.dev59.com/sQlu8.webp)
<canvas id="a" width="800" height="500">Canvas not supported on your browser</canvas>
var width = $(window).width();
var height = $(window).height();
var c = document.getElementById("a");
var ctx = c.getContext("2d");
var can2 = document.createElement('canvas');
document.body.appendChild(can2)
can2.width = c.width;
can2.height = c.height;
var ctx2 = can2.getContext("2d");
var test = new Image();
test.src = "Images/newBank.png";
test.onload = function () {
ctx2.drawImage(test, 0, 0);
};
var img = new Image();
img.src = "Images/texturetrans.png";
img.onload = function () {
ctx2.globalCompositeOperation = 'source-in';
var ptrn = ctx2.createPattern(img, 'repeat');
ctx2.fillStyle = ptrn;
ctx2.fillRect(0, 0, can2.width, can2.height);
}
我得到了这个结果:
正如您所看到的,整个物体都被我的纹理填满了。枕头等的定义已经不再可见。有没有可能让我的纹理成为一种透明蒙版?
我已经能够改变沙发的颜色:
但我也想能够在我的沙发上加入图案!
任何帮助将不胜感激,非常抱歉我的英语不好。