HTML5画布将颜色应用于形状重叠的图像 [英] HTML5 canvas apply color to image where shape overlays

问题描述

我已将此图像绘制到HTML5画布上:

I have this image drawn to a HTML5 canvas:

我想做的就是将颜色仅涂在其中一部分上. 我要应用颜色的部分由以下重叠图像定义:

What I want to do is apply color to just a part of it. The part where I want to apply color is defined by the following overlay image:

因此，基本上，我想通过叠加层指导我的着色.因此，在重叠像素与主图像像素相遇的地方，我应该在主图像上应用一种颜色.至少我是这样认为的. 请注意，叠加层与系带匹配，除了系带.

So, basically, I would like to guide my coloring by the overlay. So where the overlay pixels meets the main image pixels I should apply a color on the main image. At least that's how I see it working. Notice that the overlay matches the whole image except for the lacing.

要注意的是，我想在应用颜色时保留主图像纹理.您会看到它具有皮革质感和我想要保留的真实"感觉.

The catch is that I would like to retain the main image texture while applying the color. You can see that it has a leather texture and a "real" feel which I want to keep.

您能告诉我一些实现这一目标的方法或分享一些想法吗?

Can you please show me some methods of achieving this or share some thoughts?

谢谢！

推荐答案

globalCompositeOperation is your friend here.

基本上，您先绘制叠加层，然后将gCO设置为源于顶部"复合模式，这将使您以后的所有图形仅停留在已绘制不透明像素的位置，因此，叠加层具有透明零件.
因此，您只需填充所需命令的矩形，最后在原始图像的后面或混合后绘制我们刚创建的新形状即可.

Basically, you draw your overlay, then you set the gCO to 'source-atop' composite mode, which will make all your future drawings to only stay where there were already opaque pixels drawn, so it is important that your overlay has transparent parts.
So then you just fill a rectangle of your desired command, and finally you draw your original image, either behind, or blended to the new shape we just created.

var ctx = canvas.getContext('2d');
var loaded = 0;
function onload(){
   if(++loaded === 2){
       canvas.width = this.width;
       canvas.height = this.height;
       ctx.font = "40px sans-serif";
       draw();
     }
 }
var original = new Image();
var overlay = new Image();
original.onload = overlay.onload = onload;
original.src = 'https://i.stack.imgur.com/vIKpI.png';
overlay.src = 'https://i.stack.imgur.com/10Tre.png';

// list of blending modes.
// Note that destination-over is a composite mode,
//    which place the new drawings behind the already-there ones
var currentMode = 0;
var modes = ['destination-over', 'lighter', 'multiply', 'screen', 'overlay', 'darken',
             'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 
             'exclusion', 'hue', 'saturation', 'color', 'luminosity' ];

function draw(){
  // switch between different Blending modes
  var mode = modes[currentMode];
  currentMode = (currentMode+1)%(modes.length);
  // clear previous
  ctx.clearRect(0,0,canvas.width, canvas.height);
  // draw our overlay
  ctx.drawImage(overlay, 0,0);
  // this will keep new drawings only where we already have existing pixels
  ctx.globalCompositeOperation = 'source-atop';
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,canvas.width, canvas.height);
  // now choose between the list of blending modes
  ctx.globalCompositeOperation = mode;
  // draw our original image
  ctx.drawImage(original, 0,0);
  // go back to default
  ctx.globalCompositeOperation = 'source-over';
  // just so we can know which one is shown
  ctx.fillStyle = 'black';
  ctx.fillText(mode, 40,40)
  // do it again
  setTimeout(draw, 1000)
  
  }

canvas{
    width: 100%;
  }

<canvas id="canvas"></canvas>

这篇关于HTML5画布将颜色应用于形状重叠的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！