HTML画布-拖放上传图像并调整其大小

Question

我正在为一个大学项目做一个绘图应用程序，当前无法将图像上传到画布中，并且我想使这些图像可调整大小/可拖动。 我已经看到了这个很好的例子，并试图在我的项目中应用了几个小时，但没有成功。

是否可以将其应用于上载图片而不是该示例中的预加载图片？

我的JavaScript代码上传图片和小提琴 。 提前致谢。

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然后声明了var img = new Image(); readImage函数外部的变量。

就是我所做的，并且按预期工作。

干得好，

 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>