Question

背景：

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

问题：

但是，如果我使用两张图片，则仅上载有效，拖动不起作用：https://codepen.io/kidsdial/pen/JxxpzM

控制台错误：

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>

预先感谢.....

Answer 1

两个画布都必须使用不同的拖动功能和不同的ID，请检查下面的代码是否经过修改以拖动两个图像或代码笔链接 https://codepen.io/anon/pen/ommyjZ

希望有帮助！!!!

class Player
{
public:
    Player(); // generate player with random stats
    void printPlayer();

private:
    personal_information pinfo;
    player_skill pskill;
    player_trait ptrait;
};

Player::Player()
{
    pinfo.first_name = nameEng[rand() % ARR_SIZE(nameEng)];
    pinfo.last_name = nameEngSurname[rand() % ARR_SIZE(nameEngSurname)];
    ...
    pskill.position = positionsList[rand() % ARR_SIZE(positionsList)];
    pskill.fitness = random(10);
    ...
}

int main()
{
    Player P1genStats;
    P1genStats.printPlayer();

    Player P2genStats;
    P2genStats.printPlayer();
}

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

Answer 2

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

您只需通过

初始化一个新的maskedrag

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

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

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

注意：您将需要安装jq。

在另一张图片内拖动多张图片

2 个答案: