HTML画布 - 拖动和调整上传图像的大小

Question

我正在做一个大学项目的绘图应用程序，目前无法将图像上载到画布上，我想让这些图像可调整大小/可拖动。 我见过这个很棒的example，并试图在我的项目中使用它几个小时，但没有成功。

是否可以将其应用于上传的图像，而不是像该示例中那样预加载的图像？

我的javascript代码上传图片和一个fiddle。提前致谢。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

function el(id){return document.getElementById(id);} 
function readImage() { 
    if (this.files && this.files[0]) { 
     var FR= new FileReader(); 
     FR.onload = function(e) { 
      var img = new Image(); 
      img.onload = function() { 
      ctx.drawImage(img, true, true); 
      }; 
      img.src = e.target.result; 
     };  
     FR.readAsDataURL(this.files[0]); 
    } 
} 
el("fileUpload").addEventListener("change", readImage, false); 

Answer 1

正如你提供了一个很好的例子，我只是那些方法包括和变量在你的代码，并添加jquery随后宣布readImage功能的var img = new Image();变量之外。

就是这样，我做了，它按照预期工作。

在这里你去，

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

#canvas { 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='file' id="fileUpload" /> 
 
<canvas id="canvas" width="500" height="500"></canvas>