用纹理/图案填充图像

Question

我正在寻找一种解决方案来更改产品的纹理/图案。

此刻我有：

1. 一张带有透明背景的沙发的 .png 图片
2. 纹理的.png图片

使用以下代码：

<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);
}

`

我得到这个结果：

如您所见，整个对象都充满了我的纹理。枕头等的定义不再可见。是否可以让我的纹理成为一种透明蒙版？

我已经可以改变沙发的颜色了：

但我也希望能够在我的沙发上添加图案！

任何帮助将不胜感激，我已经为我的英语不好感到非常抱歉。

Answer 1

如果您只是在进行说明性近似，则可以使用混合和合成模式的组合。

首先要确保您的主图像具有透明度 - 这对于合成工作很重要（我在下面的演示中做了一个粗略的截断）。

主要步骤：

1. 画出图案
2. 使用混合模式在顶部绘制主图像multiply
3. 使用合成模式destination-in 在顶部绘制主图像 - 这将进行剪切

如果您想减小图案的大小，您可以通过使用较小版本的图像来做到这一点，以较小的尺寸绘制到临时画布并将其用作图案，或者使用新的变换方法模式本身。

演示

var img1 = new Image, img2 = new Image, cnt = 2,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

// image loading for demo (ignore)
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "//i.imgur.com/8WqH9v4.png";       // sofa
img2.src = "//i.stack.imgur.com/sQlu8.png";   // pattern

// MAIN CODE ---
function go() {

  // create a pattern  
  ctx.fillStyle = ctx.createPattern(img2, "repeat");
  
  // fill canvas with pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // use blending mode multiply
  ctx.globalCompositeOperation = "multiply";
  
  // draw sofa on top
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
  
  // change composition mode
  ctx.globalCompositeOperation = "destination-in";
  
  // draw to cut-out sofa
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}

<canvas id="canvas" width=600 height=400></canvas>

如果您愿意，还可以颠倒绘制图像的顺序等。这只是一种方式的示例。

如果您需要精确的纹理，则无法拍照或使用 3D 软件或手绘纹理。

注意：IE 不支持multiply - 为此，您需要手动遍历像素并将每个组件相乘。

您可以通过这种方式测试支持：

ctx.globalCompositeOperation = "multiply";
if (ctx.globalCompositeOperation === "multiply") {
    // blend as above
}
else {
    // iterate and blend manually
}

在cmets中提到了混合模式luminosity，当然也可以使用。我只想指出一些需要考虑的事情。首先，这是一种不可分离的混合模式，这意味着它在通过 HSL 颜色模型时依赖于所有组件。这使其计算密集度更高。

第二个问题是，如果您最终不得不手动执行此操作（例如在 IE 中），则代码模拟起来会有点复杂，并且会明显变慢。