且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

用纹理/图案填充图像

更新时间:2023-02-26 19:46:37

If you're just after an illustrative approximation you can use a combination of blending and composition modes.

First thing is to make sure your main image has transparency - this is important for composition to work (I made a rough cut-off in the following demo).

Main steps:

  1. Draw the pattern
  2. Draw the main image on top with blending mode multiply
  3. Draw the main image on top with compositing mode destination-in - this will make a cut-out

If you want to reduce the size of the pattern you can either do this by using a smaller version of the image, draw to a temporary canvas at a smaller size and use that as pattern, or use the new transform methods on the pattern itself.

Demo

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 = "http://i.imgur.com/8WqH9v4.png";       // sofa
img2.src = "http://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 (blending mode is automatically set to normal)
  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>

You can also reverse the order of which image is drawn etc., if you prefer. This is just an example of one way.

If you need accurate texture then there is no way around to either take photos or use a 3D software, or hand-drawn the textures.

NOTE: IE does not support multiply yet. - For this you need to manually iterate through the pixels and multiply each component with each other.

You can test for support this way:

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

Blending mode luminosity is mentioned in comments and this can be used too of course. I just want to point a couple of things to consider. The first is that this is a non-separable blending mode meaning it depends on all components as it goes through the HSL color model. This makes it a bit more compute intensive.

The second is that if you end up having to do this manually (in for example IE) the code is a bit more complex to emulate, and will be noticeably slower.

相关阅读

技术问答最新文章