[英]Mask images not displaying when used multiple times
背景
我在网站上显示蒙版图像 ,并告诉用户上传图像。
用户上传图片后,我将用户上传的图片填充到蒙版图片中
它可以在网站和Codepen中正常工作: https ://codepen.io/kidsdial/pen/wNqXEJ
要求 :
现在我正在尝试上传两个蒙版图像,但是这次蒙版图像没有显示为在codepen2中: https : //codepen.io/kidsdial/pen/OdjErW&在website2中
html
<input type="file" id="fileupa" />
<input type="file" id="fileupb" />
<div class="minaimg masked-imga" ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
<div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
<div class="minaimga">
<!-- give an id for ease of selection -->
<img id="target_img" alt="">
<div></div>
</div>
</div>
</div>
<div class="minaimg masked-imgb" ondragover="onDragOver(event)"ondragover="onDragOver(event)" >
<div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
<div class="minaimgb">
<!-- give an id for ease of selection -->
<img id="target_img" alt="">
<div></div>
</div>
</div>
</div>
的CSS
.masked-imga {
-webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
mask-image: url(https://i.stack.imgur.com/EQpM4.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
display: block;
width: 100%;
height: 100%;
}
.minaimga {
display: block;
background-color: black;
}
.masked-imgb {
-webkit-mask-image: url(https://i.stack.imgur.com/EQpM4.png);
mask-image: url(https://i.stack.imgur.com/EQpM4.png);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
display: block;
width: 100%;
height: 100%;
}
.minaimgb {
display: block;
background-color: black;
}
脚本
fileupa.onchange = e => {
target_img.src = URL.createObjectURL(fileupa.files[0]);
}
fileupb.onchange = e => {
target_img.src = URL.createObjectURL(fileupb.files[0]);
}
let prevX = 0, prevY = 0,translateX = 0, translateY = 0, scale = 1, zoomFactor = 0.1;
function onDragStart(evt) {
if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
}
prevX = evt.clientX;
prevY = evt.clientY;
}
function onDragOver(evt) {
translateX += evt.clientX - prevX;
translateY += evt.clientY - prevY;
prevX = evt.clientX;
prevY = evt.clientY;
updateStyle();
}
function updateStyle()
{
let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")";
if(document.querySelector('#uploadedImg img'))
document.querySelector('#uploadedImg img').style.transform = transform;
}
您在代码中的问题是在img
标签target_img
上使用了相同的id
。 IDs
始终是唯一的。
文件上传A
<div class="minaimga">
<!-- give an id for ease of selection -->
<img id="target_imga" alt="">
<div></div>
</div>
文件上传B:
<div class="minaimgb">
<!-- give an id for ease of selection -->
<img id="target_imgb" alt="">
<div></div>
</div>
fileupa.onchange = e => {
target_imga.src = URL.createObjectURL(fileupa.files[0]);
}
fileupb.onchange = e => {
target_imgb.src = URL.createObjectURL(fileupb.files[0]);
}
您可以为这两个类分配.minaimga,.minaimgb
height
。
.minaimga,.minaimgb {
display: block;
background-color: black;
height:500px;
}
您不能两次使用ID。 ID始终是唯一的。 您应该使用类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.