填补图像与纹理/图案

问题描述 投票:4回答:1

我正在寻找一个解决方案,以改变产品的质地/模式。

在这一刻,我有:

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

`

我得到这样的结果:

正如你所看到的,整个物体充满了我的质感。枕头等,没有定义可见了。是否可以让我的质地是一种透明的面具?

我已经能够改变沙发的颜色:

但我想能也是一个模式添加到我的沙发!

任何帮助将不胜感激,我已经为我的英语不好很遗憾。

javascript canvas html5-canvas drawing mask
1个回答
8
投票

如果一个说明性逼近后,只是你可以使用的混合和组成模式的组合。

第一件事情是要确保你的主图像具有透明度 - 这是很重要的组成的工作(我做在下面的演示粗略截止)。

主要步骤:

  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
}

混合模式luminosity在评论中提到,这可太的过程中使用。我只是想指出一些事情要考虑。第一,这是一个不可分离的混合模式,这意味着它依靠的所有组件,因为它经过了HSL颜色模型。这使得更多的计算密集型。

第二个是,如果最终不得不手动做到这一点(在例如IE)的代码是复杂一点效仿,并且将显着减慢。

© www.soinside.com 2019 - 2024. All rights reserved.