1

我正在尝试使用带有背景图像的 png 制作图像。当我只放置蒙版图像时效果很好，但是如果我添加背景图像，则前面的图像不再被蒙版

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var bg = new Image();
  var front = new Image();
  var mask = new Image();

  bg.src = 'img/background.jpg';

  bg.onload = function() {
    front.src = "img/tobemasked.jpg";
  };

  front.onload = function() {
    mask.src = "img/mask.png";
  }

  mask.onload = function() {
    display();
  }

  function display() {
    context.drawImage(bg, 0, 0); // it works if i remove this line
    context.drawImage(tmpMask, 0, 0);
    context.globalCompositeOperation = "source-in";
    context.drawImage(front, 0, 0);
  }
</script>

我想这是一个很常见的问题，但我在网上找不到任何相关的东西。

感谢您的帮助。

4

1 回答 1

0

您用来掩盖正面图像的“源输入”操作在此处定义http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#gcop-像这样输入：

在源图像和目标图像都不透明的地方显示源图像。在其他地方显示透明度。

在不绘制背景图像的情况下，目标图像仅包含您的蒙版，并且应该具有透明像素。仅在蒙版不透明的情况下才会显示正面图像。我明白这就是你想要的。

但是，在你也画了背景图之后，目标图像中应该没有透明像素，它是完全不透明的，当你绘制正面图像时，它的所有部分都会显示出来。

这将完成我认为您正在尝试做的事情：

context.drawImage(mask, 0, 0);
context.globalCompositeOperation = "source-in";
context.drawImage(front, 0, 0);
context.globalCompositeOperation = "destination-atop";
context.drawImage(bg, 0, 0);

前面的图像首先被屏蔽。之后仍然有透明像素。背景图像使用“destination-atop”选项绘制在透明区域上（参见上一个链接）。

我认为这是最简单的方法。其他一些选项是在彼此之上使用多个画布元素来创建图层或使用一些 JavaScript 库，从而可以将图层与画布一起使用。

于 2013-05-12T09:23:42.080 回答