Dragging multiple images inside another image

问题:

Background :

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

video link1

Issue :

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

video link2

Console Error :

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>

Thanks in advance.....

回答1:

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

Note: you will need jq to be installed.

回答2:

You have to use different drag functions and different ids for both the canvases, check the following code which is modified to drag two images Or the codepen link https://codepen.io/anon/pen/ommyjZ

Hope it helps !!!!

let prevXa = 0,
    prevYa = 0,
    translateXa = 0,
    translateYa = 0,
    prevXb = 0,
    prevYb = 0,
    translateXb = 0,
    translateYb = 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;
    canvas = document.getElementById('canvas1');
    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 maskedImageUrla = "https://i.stack.imgur.com/jnStF.png";


    maskedImage = new Image();
    maskedImage.src = maskedImageUrla;
    canvasb = document.getElementById('canvas1');
    ctx = canvasb.getContext("2d");
    maskedImage.onload = function() {
        console.log("loaded")
        canvasb.width = maskedImage.width;
        canvasb.height = maskedImage.height;
        ctx.drawImage(maskedImage, 0, 0, maskedImage.width, maskedImage.height);
    }


}




minaimgContainera.onmousedown = function(event) {
    var x = event.offsetX + (translateXa)
    var y = event.offsetY + (translateYa)
    var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
    draggable = pixelData[0] > 1;
}

minaimgContainerb.onmousedown = function(event) {
    var x = event.offsetX + (translateXb)
    var y = event.offsetY + (translateYb)
    var pixelData = canvasb.getContext('2d').getImageData(x, y, 1, 1).data;
    draggable = pixelData[0] > 1;
}




function onDragStarta(evt) {
    if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
        // evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
    }
    prevXa = evt.clientX;
    prevYa = evt.clientY;
}

function onDragStartb(evt) {
    if (evt.dataTransfer && evt.dataTransfer.setDragImage) {
        // evt.dataTransfer.setDragImage(evt.target.nextElementSibling, 0, 0);
    }
    prevXb = evt.clientX;
    prevYb = evt.clientY;
}

function onDragOvera(evt) {
    if (draggable) {
        translateXa += evt.clientX - prevXa;
        translateYa += evt.clientY - prevYa;
        prevXa = evt.clientX;
        prevYa = evt.clientY;
        updateStylea();
    }
}

function onDragOverb(evt) {
    if (draggable) {
        translateXb += evt.clientX - prevXb;
        translateYb += evt.clientY - prevYb;
        prevXb = evt.clientX;
        prevYb = evt.clientY;
        updateStyleb();
    }
}

function updateStylea() {
    let transform = "translate(" + translateXa + "px, " + translateYa + "px) scale(" + scale + ")";
    var img = document.querySelector('#uploadedImga img');
    img.style.transform = transform;
}

function updateStyleb() {
    let transform = "translate(" + translateXb + "px, " + translateYb + "px) scale(" + scale + ")";
    var img = document.querySelector('#uploadedImgb img');
    img.style.transform = transform;
}

.container {
    border: 1px solid #DDDDDD;
    width: 1212px;
    height: 440px;
    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(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.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(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.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="minaimgContainera" ondragover="onDragOvera(event)" ondragover="onDragOvera(event)"  >
  <div draggable="true" ondragstart="onDragStarta(event)" id="uploadedImga">
        <img id="target_imga"  alt="">
    <canvas class="canvas" id="canvas1" 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="minaimgContainerb" ondragover="onDragOverb(event)" ondragover="onDragOverb(event)"  >
  <div draggable="true" ondragstart="onDragStartb(event)" id="uploadedImgb">
        <img id="target_imgb"  alt="">
    <canvas class="canvas" id="canvas2" width="416" height="388"></canvas>
  </div>
</div>

</div>