使用一个图像作为另一个图像的掩码答案

【问题标题】：Use an image as a mask for another image使用一个图像作为另一个图像的掩码
【发布时间】：2020-12-06 14:11:12
【问题描述】：

我正在制作一个网站，我希望它是一个白页，您可以在上面加盖印章以使另一个图像出现在下面。因此，当您单击时，您会打孔。像这个例子：

所以当我单击时，我设法在背景中有一个随机图像，这对我想要的很好，并且能够.append() 打孔。 但我不知道如何做面具的事情我一直在网上挖掘一些东西和帮助，并设法使其在某些情况下起作用，但不是那种情况...... p>

应该是这样的（我猜）：

背景中的图像
前面的白色形状
星星形状在白色形状中打洞

目前，我唯一能做的就是除了一个更大的打孔（这是我的原始图片）之外的图片，但是当我点击它时不会打孔，它只是添加图章。

代码如下：

var images = ["https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png", "https://ichef.bbci.co.uk/news/1024/cpsprodpb/151AB/production/_111434468_gettyimages-1143489763.jpg"];


$(document.body).click(function(c) {
  var tw = 100 / 2;
  var th = 30 / 2;
  var x = Math.floor((Math.random() * images.length));
    document.getElementById('random').src = images[x];
  $("#random").css({
    position: 'absolute',
    display: "block",
    left: 0,
    top: 0
  });
    var tw = 50 / 2;
    var th = tw;
  $('#holepunch:last').clone().appendTo(this).css({
    position: 'absolute',
    display: "block",

    left: c.pageX - tw - $(this).position().left,
    top: c.pageY - th + $(this).scrollTop()
});
});

body{
  background: lightgrey;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  opacity: 1;
}
.fauxbody{
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: white;
  top: 0;
  left: 0;

  -webkit-mask:
    -moz-element(#holepunch) 1vw 1vh no-repeat,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

#random{
   z-index: -100;
  width: 100vw;
  height: auto;
}

#holepunch{
  width: 50px;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <img id="random">
  <div class ="fauxbody">

    <img id="holepunch" src="https://oshi.at/iimtXg/Jqtz.png">
    </div>
</body>

【问题讨论】：

标签： javascript html jquery css css-mask

【解决方案1】：

这是一个使用多个掩码和 CSS 变量的想法。诀窍是在每次点击时添加一个额外的图层。我删除了与后台生成相关的代码，因为它无关紧要并且很容易添加

var mask = "";
w = 60;
h = 60;

document.documentElement.addEventListener("click", function (c) {
    mask+="url(https://i.ibb.co/FzmCjLL/Jqtz.png)"+(c.pageX-w/2)+"px "+(c.pageY-h/2)+"px/"+w+"px "+h+"px no-repeat,";
   document.documentElement.style.setProperty("--mask", mask)
});

html {
  background:url(https://picsum.photos/800/800) center/cover;
}

html::before {
  content:"";
  position: fixed;
  background-color: #f3f3f3;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  -webkit-mask: 
     var(--mask)
     linear-gradient(#fff 0 0);
  -webkit-mask-reepat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

也像下面没有mask-composite:

var mask = "";
w = 60;
h = 60;

document.documentElement.addEventListener("click", function (c) {
    if(mask!="")
      mask+=",";
    mask+="url(https://i.ibb.co/FzmCjLL/Jqtz.png)"+(c.pageX-w/2)+"px "+(c.pageY-h/2)+"px/"+w+"px "+h+"px no-repeat";
   document.documentElement.style.setProperty("--mask", mask)
});

html::before {
  content:"";
  position: fixed;
  background:url(https://picsum.photos/800/800) center/cover;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  -webkit-mask:var(--mask,linear-gradient(transparent 0 0));
}

【讨论】：

嘿！多谢！我不得不说这工作得很好，但是当形状重叠时，它们会混合在一起形成一个白色的形状（这是两者的关联......）你知道如何避免这种情况吗？
@pual 检查更新，添加了另一个想法；）
你杀了它我不得不说。感谢您对这个问题的帮助，以及我之前关于掩蔽的问题！你摇滚！

【解决方案2】：

我会尝试使用具有白色背景的画布并添加一个 mouseclick 事件侦听器，它会剪切画布。我发现另一个关于堆栈溢出的问题可能对您有帮助：

HTML5 Cut out circle from previous drawn strokes

【讨论】：

嗨！谢谢，这确实是一条好路，但恐怕我的 jquery 技能不足以将那个圆圈变成我的星形