Question

在此Codepen1中，我正在将一个图像上传到另一个图像中。...

在此Codepen2中，我可以将一个图像拖到另一个图像中。...

现在我正在尝试结合使用这两种功能，以将一个图像上传并拖动到另一个图像中，但是在codepen3中没有发生上传

HTML

<input type="file" onchange="load(this.files[0])"/><br>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="395">

    <mask id="mask1">
        <image style="background-color:green;" xlink:href="https://i.stack.imgur.com/L5daY.png" width="324" height="395"></image>
    </mask>

<div class="minaimg masked-img" ondragover="onDragOver(event)" onwheel="scrollZoom(event)">
<div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
<div class = "minaimg" >

<image id="masked-image" xlink:href="" mask="url(#mask1)"></image>

</div>
</div>
</div>

</svg>

脚本

function load(file) {
    var img = new Image(),
        imgURL = URL.createObjectURL(file);


    img.onload = function() {
        var width = img.naturalWidth,
            height = img.naturalHeight,
            maskedImage = document.getElementById('masked-image');

        maskedImage.setAttribute('xlink:href', imgURL);
        maskedImage.setAttribute('height', 395);


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


        URL.revokeObjectURL(imgURL);
    };

    img.src = imgURL;




}

如果您还有其他疑问，请告诉我。...

提前谢谢。...

Answer 1

要显示来自用户磁盘的图像，只需创建指向该磁盘的URL，并设置一个标记的src指向该URL即可。

您显然知道如何使用 URL.createObjectURL 。

在可拖动版本中，您已经有一个元素，因此只需在输入的 onchange 事件中设置其src：

fileup.onchange = e => {
 target_img.src = URL.createObjectURL(fileup.files[0]);   
}

///Below is OP's code\\\


let prevX = 0, prevY = 0,translateX = 0, translateY = 0, scale = 1, zoomFactor = 0.1;
//const img = document.querySelector('#uploadedImg img');

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;
}

.masked-img {
  background-color: green;
  margin: 20px auto;
  -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;
  position:relative;
  bottom:60px;
  left:40px;
}


.minaimg {
  display: block;
}

<input type="file" id="fileup" />
<div class="minaimg masked-img" ondragover="onDragOver(event)" >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
    <div class="minaimg">
      <!-- give an id for ease of selection -->
      <img id="target_img" src="https://i.stack.imgur.com/AV6yq.jpg" alt="">

      <div></div>

    </div>
  </div>
</div>

使用拖动代码后未上传图片

1 个答案: