我一直试图在画布中拖动和调整相同的图像但是我无法成功地执行此操作
我从第一个链接中选择了拖动代码，并从第二个链接调整了代码大小，但在组合这些代码时，最终输出有一些错误和问题。我还添加了一个上传图像按钮，用户可以从本地目录中选择要上传到画布的图像，该图像正常工作
$(function () {
$('#file-input').change(function (e) {
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d');
$img.load(function () {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
fileResize();
});
}
function fileResize() {
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 = 10;
var rr = resizerRadius * resizerRadius ;
var imageX = 0;
var imageY = 0;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var img = new Image();
var draggingResizer = {
x: 0,
y: 0
};
img.onload = function () {
imageWidth = img.width;
imageHeight = img.height;
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight;
iOrientation = (imageWidth >= imageHeight) ? "Wide" : "Tall";
draw(true, true);
}
img.src = canvas.toDataURL();
var border = 8;
var isLeft = false;
var isRight = false;
var isTop = false;
var isBottom = false;
var iAnchor;
canvas.onmousedown = handleMousedown;
canvas.onmousemove = handleMousemove;
canvas.onmouseup = handleMouseup;
canvas.onmouseout = handleMouseup;
function draw(withAnchors, withBorders) {
var cx = imageX + (imageRight - imageX) / 2;
var cy = imageY + (imageBottom - imageY) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, imageX, imageY, imageRight - imageX, imageBottom - imageY);
ctx.setLineDash([10, 15]);
ctx.strokeStyle = "#000";
ctx.stroke();
if (withAnchors) {
ctx.fillRect(imageX, imageY, border, border);
ctx.fillRect(imageRight - border, imageY, border, border);
ctx.fillRect(imageRight - border, imageBottom - border, border, border);
ctx.fillRect(imageX, imageBottom - border, border, border);
ctx.fillRect(cx, imageY, border, border);
ctx.fillRect(cx, imageBottom - border, border, border);
ctx.fillRect(imageX, cy, border, border);
ctx.fillRect(imageRight - border, cy, border, border);
}
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 hitResizeAnchor(x, y) {
// which borders are under the mouse
isLeft = (x > imageX && x < imageX + border);
isRight = (x < imageRight && x > imageRight - border);
isTop = (y > imageY && y < imageY + border);
isBottom = (y < imageBottom && y > imageBottom - border);
// return the appropriate anchor
if (isTop && isLeft) {
return (iOrientation + "TL");
}
if (isTop && isRight) {
return (iOrientation + "TR");
}
if (isBottom && isLeft) {
return (iOrientation + "BL");
}
if (isBottom && isRight) {
return (iOrientation + "BR");
}
if (isTop) {
return ("T");
}
if (isRight) {
return ("R");
}
if (isBottom) {
return ("B");
}
if (isLeft) {
return ("L");
}
return ("null");
}
var resizeFunctions = {
T: function (x, y) {
imageY = y;
canvas.style.cursor = "n-resize";
},
R: function (x, y) {
imageRight = x;
},
B: function (x, y) {
imageBottom = y;
},
L: function (x, y) {
imageX = x;
},
WideTR: function (x, y) {
imageRight = x;
imageY = imageBottom - (imageHeight * (imageRight - imageX) / imageWidth);
},
TallTR: function (x, y) {
imageY = y;
imageRight = imageX + (imageWidth * (imageBottom - imageY) / imageHeight);
},
WideBR: function (x, y) {
imageRight = x;
imageBottom = imageY + (imageHeight * (imageRight - imageX) / imageWidth);
},
TallBR: function (x, y) {
imageBottom = y;
imageRight = imageX + (imageWidth * (imageBottom - imageY) / imageHeight);
},
WideBL: function (x, y) {
imageX = x;
imageBottom = imageY + (imageHeight * (imageRight - imageX) / imageWidth);
},
TallBL: function (x, y) {
imageBottom = y;
imageX = imageRight - (imageWidth * (imageBottom - imageY) / imageHeight);
},
WideTL: function (x, y) {
imageX = x;
imageY = imageBottom - (imageHeight * (imageRight - imageX) / imageWidth);
},
TallTL: function (x, y) {
imageBottom = y;
imageX = imageRight - (imageWidth * (imageBottom - imageY) / imageHeight);
}
};
function hitImage(x, y) {
return (x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight);
}
function handleMousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.style.cursor = "move";
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
var mouseX = e.clientX - offsetX;
var mouseY = e.clientY - offsetY;
iAnchor = hitResizeAnchor(mouseX, mouseY);
isDown = (iAnchor);
draggingImage = hitImage(startX, startY);
}
function handleMouseup(e) {
canvas.style.cursor = "default";
e.preventDefault();
e.stopPropagation();
draggingImage = false;
isDown = false;
draw(true);
}
function handleMousemove(e) {
e.preventDefault();
e.stopPropagation();
if (isDown) {
var mouseX = e.clientX - offsetX;
var mouseY = e.clientY - offsetY;
resizeFunctions[iAnchor](mouseX, mouseY);
draw(false);
}
if (draggingImage) {
canvas.style.cursor = "move";
imageClick = false;
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
imageX += dx;
imageY += dy;
imageRight += dx;
imageBottom += dy;
startX = mouseX;
startY = mouseY;
draw(false, true);
}
}
function handleMouseOut(e) {
handleMouseUp(e);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Upload to Canvas</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="demo-uploader.js"></script>
</head>
<body>
<input type="file" id="file-input" accept=".jpg,.png,.gif.,svg">
<canvas id="canvas" width="600" height="400" style=" border: solid thin #232323;"></canvas>
</body>
</html>