Javascript 多次使用时不显示遮罩图像

背景

我在网站上显示面具图片，并告诉用户上传图片

一旦用户上传图片，我就把用户上传的图片填充到掩码图片里面

在代码笔中工作正常（&N）：

要求：

现在我正试图上传两个掩码图像，但这次掩码图像的显示方式与codepen2:&中的不同

html

剧本

---

一个ID不能使用两次。ID总是唯一的。您应该使用类。

代码中的问题是您在img标记target\u img上使用了相同的id。它们总是独一无二的

文件上传

您可以为这两个类指定.minaimga、.minaimgb的高度

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;
}

---

谢谢你的回答，你能告诉我你在说哪个身份证吗？我使用的是两个不同的ID-fileupa和fileupb…..谢谢，您的代码在中运行良好，但是为什么在我上传之前不显示掩码图像呢？但在我使用单遮罩图像之前，它在我上传之前显示为.minaimga、.minaimgb这两个类来设置遮罩图像的高度。现在检查

.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;
}

 <div class="minaimga">
          <!-- give an id for ease of selection -->
          <img id="target_imga"  alt="">

          <div></div>

        </div>

<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 {
      display: block;
      background-color: black;
      height:500px;
    }