javascript - 使用一个图像作为另一个图像的掩码
问题描述
我正在制作一个网站,我希望它是一个白页,您可以标记它以使另一个图像出现在下面。因此,当您单击时,您会打孔。像这个例子:
因此,当我单击时,我设法在背景中有一个随机图像,这对我想要的东西来说很好,并且能够.append()
打孔。
但我不知道如何做面具的事情,我一直在网上挖掘一些东西和帮助,并设法让它在某些情况下工作,但不是那种......
应该是这样的(我猜):
- 背景中的图像
- 前面的白色形状
- 星形在白色形状上打洞
现在,我唯一能做的就是除了一个更大的打孔器(这是我的原始图像)之外的图片,但是当我点击它时不会打孔,它只是添加了图章。
这是代码:
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>
解决方案
这是一个使用多个掩码和 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));
}
推荐阅读
- dart - 如何在 Dart 中创建可为空的变量
- for-loop - 结果差异:使用列表和for循环与单参数输入
- c# - 如何获取使用 Dapper 输入的最后一个 id?
- websphere - 将应用程序从 Tomcat V 8.5 迁移到 Websphere Application Server
- aem - 图像中给定示例的 data-sly-test 功能
- php - 输入类型 = 文件阻止了我的提交按钮
- javascript - Javascript函数按顺序运行
- typescript - 我想知道我的启动后在配置文件中执行了多少次
- h.264 - 无法让 DirectShow MPEG-2 解码器输出 YV12/NV12 渐进式
- c# - 使用外部优先级列表任意排序项目