アップロードした画像をサイズ変更/移動後にキャンバスに適用する

Question

キャンバスに画像をアップロードしてサイズを変更して移動することができます。今私はキャンバスにイメージを適用したい、たとえば、私は別のイメージをアップロードして配置することができるように、私は 'Enter'キーまたは何か他のソリューション（他の解決策を押すことができます）を押すと、前のものと並んでいる。

これは私が持っているものです。 Fiddle

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. 古い画像を格納する配列を作成します。readImage機能で

   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();しかし、問題を引き起こした可能性があるようでしたので、そこに私の本能を先行させました。