在另一张图片内拖动多张图片 [英] Dragging multiple images inside another image

问题描述

背景：

如果我使用单个图片，则可以将上传的图片拖到另一个图片中图片： https://codepen.io/AlenToma/pen/WPLmbw

if i use single image , i can able to drag the uploaded image inside another image : https://codepen.io/AlenToma/pen/WPLmbw

视频链接1

问题：

但是如果我使用两张图像，上传有效，拖动无效： https://codepen.io/ kidsdial / pen / JxxpzM

But if i use two images, only uploading is working, dragging is not working : https://codepen.io/kidsdial/pen/JxxpzM

视频链接2

控制台错误：

Uncaught TypeError: canvas.getContext is not a function

let prevX = 0,
    prevY = 0,
    translateX = 0,
    translateY = 0,
    scale = 1,
    zoomFactor = 0.1,
    draggable = false,
    ctx;

fileupa.onchange = e => {
    target_imga.src = URL.createObjectURL(fileupa.files[0]);


     var maskedImageUrl ="https://i.stack.imgur.com/jnStF.png";

    maskedImage = new Image();
    maskedImage.src = maskedImageUrl;

    ctx = canvas.getContext("2d");
    maskedImage.onload = function() {
        console.log("loaded")
        canvas.width = maskedImage.width;
        canvas.height = maskedImage.height;
        ctx.drawImage(maskedImage, 0, 0, maskedImage.width, maskedImage.height);
    }


}



fileupb.onchange = e => {
    target_imgb.src = URL.createObjectURL(fileupb.files[0]);


     var maskedImageUrl ="https://i.stack.imgur.com/jnStF.png";

    maskedImage = new Image();
    maskedImage.src = maskedImageUrl;

    ctx = canvas.getContext("2d");
    maskedImage.onload = function() {
        console.log("loaded")
        canvas.width = maskedImage.width;
        canvas.height = maskedImage.height;
        ctx.drawImage(maskedImage, 0, 0, maskedImage.width, maskedImage.height);
    }


}




minaimgContainer.onmousedown = function(event) {
    var x = event.offsetX + (translateX)
    var y = event.offsetY + (translateY)
    var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
    draggable = pixelData[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) {
    if (draggable) {
        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 + ")";
    var img = document.querySelector('#uploadedImg img');
    img.style.transform = transform;
}

.container {
    border: 1px solid #DDDDDD;
    width: 1212px;
    height: 1212px;
    position:relative;
	background:red;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 100px;
    z-index: 1;
    left: 280px;
}

.customb{
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 100px;
    z-index: 1;
    left: 580px;
}


#canvas{
display: block;
    position: absolute;
    top: 0;
    z-index: -1;
}

.masked-imga

{
    width: 416px;
   height: 388px;
  -webkit-mask-image: url(https://i.stack.imgur.com/jnStF.png);
  mask-image: url(https://i.stack.imgur.com/jnStF.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  position: absolute;
	top: 10px;
	left: 173px; 
  background-color: white;
  overflow:hidden;
}

.masked-imgb

{
    width: 416px;
   height: 388px;
  -webkit-mask-image: url(https://i.stack.imgur.com/jnStF.png);
  mask-image: url(https://i.stack.imgur.com/jnStF.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  
  position: absolute;
	top: 10px;
	left: 673px; 
  background-color: white;
  overflow:hidden;
}

.minaimga
{
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb
{
  display: block;
  background-color: white;
  height: 278px;
}

<div class="container">

<label for="fileupa" class="customa">
    Upload Image
  </label>
  <input id="fileupa"  type="file" style="display:none;">

<div class="minaimg masked-imga" id="minaimgContainer" ondragover="onDragOver(event)"ondragover="onDragOver(event)"  >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
        <img id="target_imga"  alt="">
    <canvas id="canvas" width="416" height="388"></canvas>
  </div>
</div>

<label for="fileupb" class="customb">
    Upload Image
  </label>
  <input id="fileupb"  type="file" style="display:none;">

<div class="minaimg masked-imgb" id="minaimgContainer" ondragover="onDragOver(event)"ondragover="onDragOver(event)"  >
  <div draggable="true" ondragstart="onDragStart(event)" id="uploadedImg">
        <img id="target_imgb"  alt="">
    <canvas id="canvas" width="416" height="388"></canvas>
  </div>
</div>

</div>

预先感谢.....

推荐答案

我为您制作了插件，请参见 codePen

I made you a plugin, see here at codePen

您只需通过

you simple initilize a new maskedrag by

  var mask1 = $(".container").mask({
        maskImageUrl: "maskimageUrl", // the maskedImage
        imageUrl: "https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" // the image that will be draggable
    });

您还可以加载新图像。这是当您上传图像

you could also load new image. This is when you upload an image

   mask1.loadImage("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg") // when you upload an image

注意：您将需要安装jq。

这篇关于在另一张图片内拖动多张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！