调整/移动大小后，将上传的图像应用到画布中

Question

我可以将图像上传到画布中，并能够调整大小并四处移动。现在，我想在移动它后，将图像应用到画布中，例如，当我按" Enter"键或其他内容（可以是其他解决方案）时，以便我可以上传另一个图像并放置它与前一个。

这就是我所拥有的：小提琴

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var startX;
var startY;
var isDown = false;

var pi2 = Math.PI * 2;
var resizerRadius = 8;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
    x: 0,
    y: 0
};
var imageX = 50;
var imageY = 50;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;
function el(id){return document.getElementById(id);}
var img = new Image();
function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           img = new Image();
           img.onload = function() {
             imageWidth = img.width;
             imageHeight = img.height;
             imageRight = imageX + imageWidth;
             imageBottom = imageY + imageHeight
             draw(true, false);
           };
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    }
}
el("fileUpload").addEventListener("change", readImage, false);

function draw(withAnchors, withBorders) {
    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // draw the image
    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);
    // optionally draw the draggable anchors
    if (withAnchors) {
        drawDragAnchor(imageX, imageY);
        drawDragAnchor(imageRight, imageY);
        drawDragAnchor(imageRight, imageBottom);
        drawDragAnchor(imageX, imageBottom);
    }
    // optionally draw the connecting anchor lines
    if (withBorders) {
        ctx.beginPath();
        ctx.moveTo(imageX, imageY);
        ctx.lineTo(imageRight, imageY);
        ctx.lineTo(imageRight, imageBottom);
        ctx.lineTo(imageX, imageBottom);
        ctx.closePath();
        ctx.stroke();
    }
}
function drawDragAnchor(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, resizerRadius, 0, pi2, false);
    ctx.closePath();
    ctx.fill();
}
function anchorHitTest(x, y) {
    var dx, dy;
    // top-left
    dx = x - imageX;
    dy = y - imageY;
    if (dx * dx + dy * dy <= rr) {
        return (0);
    }
    // top-right
    dx = x - imageRight;
    dy = y - imageY;
    if (dx * dx + dy * dy <= rr) {
        return (1);
    }
    // bottom-right
    dx = x - imageRight;
    dy = y - imageBottom;
    if (dx * dx + dy * dy <= rr) {
        return (2);
    }
    // bottom-left
    dx = x - imageX;
    dy = y - imageBottom;
    if (dx * dx + dy * dy <= rr) {
        return (3);
    }
    return (-1);
}

function hitImage(x, y) {
    return (x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight);
}

function handleMouseDown(e) {
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    draggingResizer = anchorHitTest(startX, startY);
    draggingImage = draggingResizer < 0 && hitImage(startX, startY);
}
function handleMouseUp(e) {
    draggingResizer = -1;
    draggingImage = false;
    draw(true, false);
}
function handleMouseOut(e) {
    handleMouseUp(e);
}
function handleMouseMove(e) {
    if (draggingResizer > -1) {
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);
        // resize the image
        switch (draggingResizer) {
            case 0:
                //top-left
                imageX = mouseX;
                imageWidth = imageRight - mouseX;
                imageY = mouseY;
                imageHeight = imageBottom - mouseY;
                break;
            case 1:
                //top-right
                imageY = mouseY;
                imageWidth = mouseX - imageX;
                imageHeight = imageBottom - mouseY;
                break;
            case 2:
                //bottom-right
                imageWidth = mouseX - imageX;
                imageHeight = mouseY - imageY;
                break;
            case 3:
                //bottom-left
                imageX = mouseX;
                imageWidth = imageRight - mouseX;
                imageHeight = mouseY - imageY;
                break;
        }
        if(imageWidth<25){imageWidth=25;}
        if(imageHeight<25){imageHeight=25;}
        // set the image right and bottom
        imageRight = imageX + imageWidth;
        imageBottom = imageY + imageHeight;
        // redraw the image with resizing anchors
        draw(true, true);
    } else if (draggingImage) {
        imageClick = false;
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);
        // move the image by the amount of the latest drag
        var dx = mouseX - startX;
        var dy = mouseY - startY;
        imageX += dx;
        imageY += dy;
        imageRight += dx;
        imageBottom += dy;
        // reset the startXY for next time
        startX = mouseX;
        startY = mouseY;
        // redraw the image with border
        draw(false, true);
    }
}

$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

谢谢。

Answer 1

不要过度思考。在这里编辑您的小提琴：https：//jsfiddle.net/mrqhpgnk/4/

1. 创建一个数组来存储旧图像：

   var myOldImagesArray = [];
   var atLeastOneImage = false;
   

2. 读取函数中的更新：

   var img;
   function readImage() {
     if ( this.files && this.files[0] ) {
       var FR= new FileReader();
       FR.onload = function(e) {
         if(atLeastOneImage) {
           myOldImagesArray.push({
             image: img, X: imageX, Y: imageY, 
             width: imageWidth, height: imageHeight
           });
         }
         var img2 = new Image();
         img2.onload = function() {
           imageWidth = img2.width;
           imageHeight = img2.height;
           imageRight = imageX + imageWidth;
           imageBottom = imageY + imageHeight
           draw(true, false);
         };
         img2.src = e.target.result;
         img = img2;
         atLeastOneImage = true;
       };       
       FR.readAsDataURL( this.files[0] );
     }
   }
   

3. 不要忘记在绘制功能中绘制旧图像。

   for(var i=0; i<myOldImagesArray.length; i++) {
     var oldImageDict = myOldImagesArray[i];
     var oldImage = oldImageDict.image;
     ctx.drawImage(oldImage, 0, 0, oldImage.width, oldImage.height, oldImageDict.X, oldImageDict.Y, oldImageDict.width, oldImageDict.height);
   }
   

我使用了数组类型的字典，因为您似乎有很多与图像本身有关的变量。

另外，请确保img是新鲜的。不确定是否有效，如果没有创建新的变量var img2 = new Image();，但似乎可能会引起问题，所以就继续我的本能。