在canvas中上传的图像可以在html5中拖动，触摸和旋转
我是Html5的新手。 我正在上传一张图片，但它没有在canvas中显示，如果我提供图像的直接来源，那么它将会正常工作。 我从这个链接获取帮助javascript：上传图像文件并将其绘制到canvas我会告诉你我的代码。
body { padding:0px; } #canvas { border:1px solid red; }
Click and drag the image or drag the dots to resize.
<!--
Text: --> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // var Input = document.getElementById('words'); var x = 10; var y = 30; ctx.font = "bold 20px sans-serif"; ctx.fillStyle = "black"; // $('#words').keyup(function () { // ctx.fillText($("#words").val(), x, y); // }); 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 = 3; var rr = resizerRadius * resizerRadius; var draggingResizer = { x: 0, y: 0 }; var imageX = 39; var imageY = 15; var imageWidth, imageHeight, imageRight, imageBottom; var draggingImage = false; var startX; var startY; var img = new Image(); img.onload = function () { imageWidth = 165; imageHeight = 125; imageRight = imageX + imageWidth; imageBottom = imageY + imageHeight draw(true, false); } var b; var input = document.getElementById('input'); input.addEventListener('change', handleFiles); function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image; b = URL.createObjectURL(e.target.files[0]); console.log("jkfdhgjkdfhgjkdf " + b); img.onload = function () { ctx.drawImage(img, 60, 60); } } img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg"; 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 imageX && x imageY && y < imageY + imageHeight); } function handleMouseDown(e) { startX = parseInt(e.clientX - offsetX); startY = parseInt(e.clientY - offsetY); draggingResizer = anchorHitTest(startX, startY); draggingImage = 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); }); 
在此屏幕截图中可以使用（img.src =“https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg”）调整图像大小。 但我想用户在canvas上上传这个图片。 当我用户上传图片时，它将无法正常工作。 我会给你一个屏幕截图。 
在现有代码中我改变了一些想法。 现在用户上传图片。
body { padding:0px; } #canvas { border:1px solid red; }
Click and drag the image or drag the dots to resize.
<!--
Text: --> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // var Input = document.getElementById('words'); var x = 10; var y = 30; ctx.font = "bold 20px sans-serif"; ctx.fillStyle = "black"; // $('#words').keyup(function () { // ctx.fillText($("#words").val(), x, y); // }); 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 = 3; var rr = resizerRadius * resizerRadius; var draggingResizer = { x: 0, y: 0 }; var imageX = 39; var imageY = 15; var imageWidth, imageHeight, imageRight, imageBottom; var draggingImage = false; var startX; var startY; var img = new Image(); img.onload = function () { imageWidth = 165; imageHeight = 125; imageRight = imageX + imageWidth; imageBottom = imageY + imageHeight draw(true, false); } var b; var input = document.getElementById('input'); input.addEventListener('change', handleFiles); function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image; img.src = URL.createObjectURL(e.target.files[0]); console.log("jkfdhgjkdfhgjkdf " + b); img.onload = 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 imageX && x imageY && y < imageY + imageHeight); } function handleMouseDown(e) { startX = parseInt(e.clientX - offsetX); startY = parseInt(e.clientY - offsetY); draggingResizer = anchorHitTest(startX, startY); draggingImage = 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); }); img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg";
直到现在图像不旋转和拖动。 
请告诉我如何在canvas中拖动和移动此图像。
请分享您的想法。 因为这对我来说非常重要。 提前致谢。
var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); }); }; reader.readAsDataURL(file); });
canvas{ border: 1px solid black; }