Загрузка изображения не происходит после использования кода перетаскивания - PullRequest
Новая
       58

Загрузка изображения не происходит после использования кода перетаскивания

0 голосов
/ 01 февраля 2019

В этом 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;




}

Пожалуйста, дайте мне знать, если у вас есть какие-либо другие сомнения ....

Спасибо взаранее ....

1 Ответ

0 голосов
/ 01 февраля 2019

Чтобы отобразить изображение с диска пользователя, достаточно создать URL-адрес, указывающий на него, и установить src тег *1002*, указывающий на этот URL-адрес.

Вы, очевидно, знаете, как это сделатьс URL.createObjectURL .

В вашей перетаскиваемой версии у вас уже есть такой imageэлемент, поэтому вам просто нужно установить его src во входном файле onchange событие: 

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