使用一个图像作为另一个图像的蒙版

Question

我正在制作一个网站，我希望它是一个白页，您可以在上面加盖戳记以显示另一张图片。所以当你点击时，你就打了一个洞。像这个例子：

因此，当我单击时，我设法在背景中设置了随机图像，这对我想要的效果很好，并且能够 .append() 打孔。 但我不知道如何做面具的事情我一直在网上寻找一些东西和帮助，并设法让它在某些情况下工作但不是那个.. .

应该是这样的（我猜的）:

背景图片
前面的白色形状
星星形状在白色形状上打孔

现在，我唯一能做的就是在图片上加上一个更大的打孔（这是我原来的 img），但是当我点击它时没有打任何孔，它只是添加了图章。

这是代码：

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>

Answer 1

我会尝试使用白色背景的 canvas 并添加一个鼠标点击事件侦听器，它会删除 canvas。我在堆栈溢出上发现了另一个问题，这可能对您有帮助：

HTML5 Cut out circle from previous drawn strokes

Answer 2

这是一个使用多个掩码和 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));
}

使用一个图像作为另一个图像的蒙版

Use an image as a mask for another image

html

javascript

css

jquery

css-mask