ASP.NET Canvas 图片和PDF显示、旋转、缩放、裁剪功能实现
以下是一个示例代码，演示了如何使用ASP.NET和JavaScript实现通过按钮打开本地图片或PDF，并在canvas控件中显示、旋转、缩放和裁剪。
ASP.NET部分（Default.aspx）：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/pdf.js"></script>
<script src="Scripts/main.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" id="fileInput" />
<button id="openButton">Open</button>
<canvas id="canvas" width="800" height="600"></canvas>
<input type="hidden" id="rotationInput" />
<input type="hidden" id="cropInput" />
</div>
</form>
</body>
</html>
JavaScript部分（main.js）：
$(document).ready(function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageObj = null;
var pdfDoc = null;
var pageNum = 1;
var rotation = 0;
var crop = { left: 0, top: 0, width: 0, height: 0 };
// 打开按钮点击事件
$("#openButton").click(function () {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var url = e.target.result;
var extension = file.name.split('.').pop().toLowerCase();
if (extension === "pdf") {
// 加载PDF
PDFJS.getDocument(url).then(function (pdf) {
pdfDoc = pdf;
renderPDFPage(pageNum);
});
} else if (extension === "jpg" || extension === "jpeg" || extension === "png" || extension === "gif") {
// 加载图片
imageObj = new Image();
imageObj.src = url;
imageObj.onload = function () {
drawImage();
};
}
};
reader.readAsDataURL(file);
});
// 渲染PDF页面
function renderPDFPage(num) {
pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(1.0);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
// 绘制图片到canvas
function drawImage() {
canvas.height = imageObj.height;
canvas.width = imageObj.width;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(imageObj, 0, 0);
}
// 鼠标在canvas上的事件
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);
var startX, startY, isDown = false;
// 鼠标按下事件
function handleMouseDown(e) {
startX = parseInt(e.clientX - canvas.offsetLeft);
startY = parseInt(e.clientY - canvas.offsetTop);
isDown = true;
}
// 鼠标移动事件
function handleMouseMove(e) {
if (!isDown) return;
var mouseX = parseInt(e.clientX - canvas.offsetLeft);
var mouseY = parseInt(e.clientY - canvas.offsetTop);
// 计算裁剪区域的left、top、width和height
var left = Math.min(startX, mouseX);
var top = Math.min(startY, mouseY);
var width = Math.abs(mouseX - startX);
var height = Math.abs(mouseY - startY);
// 在canvas上绘制裁剪框
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(imageObj, 0, 0);
context.strokeStyle = "red";
context.lineWidth = 2;
context.strokeRect(left, top, width, height);
// 更新裁剪区域的隐藏输入字段
document.getElementById("cropInput").value = left + "," + top + "," + width + "," + height;
}
// 鼠标抬起事件
function handleMouseUp(e) {
isDown = false;
}
// 鼠标滚轮事件
canvas.addEventListener("wheel", handleMouseWheel);
// 鼠标滚轮事件处理函数
function handleMouseWheel(e) {
e.preventDefault();
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
var scaleFactor = 1.1;
var zoom = (delta > 0) ? scaleFactor : (1 / scaleFactor);
// 缩放canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.scale(zoom, zoom);
context.drawImage(imageObj, 0, 0);
// 更新缩放比例的隐藏输入字段
document.getElementById("zoomInput").value = zoom;
}
// 触屏事件
canvas.addEventListener("touchstart", handleTouchStart);
canvas.addEventListener("touchmove", handleTouchMove);
canvas.addEventListener("touchend", handleTouchEnd);
var touchX, touchY, isTouch = false;
// 触屏开始事件
function handleTouchStart(e) {
e.preventDefault();
var touch = e.touches[0];
touchX = parseInt(touch.clientX - canvas.offsetLeft);
touchY = parseInt(touch.clientY - canvas.offsetTop);
isTouch = true;
}
// 触屏移动事件
function handleTouchMove(e) {
if (!isTouch) return;
e.preventDefault();
var touch = e.touches[0];
var touchMoveX = parseInt(touch.clientX - canvas.offsetLeft);
var touchMoveY = parseInt(touch.clientY - canvas.offsetTop);
// 计算旋转角度
var rotation = Math.atan2(touchMoveY - touchY, touchMoveX - touchX) * 180 / Math.PI;
// 旋转canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate((rotation - oldRotation) * Math.PI / 180);
context.translate(-canvas.width / 2, -canvas.height / 2);
context.drawImage(imageObj, 0, 0);
// 更新旋转角度的隐藏输入字段
document.getElementById("rotationInput").value = rotation;
oldRotation = rotation;
}
// 触屏结束事件
function handleTouchEnd(e) {
isTouch = false;
}
});
请注意，上述代码中使用了pdf.js库来处理PDF文件，你需要将pdf.js和pdf.worker.js文件放在与main.js相同的目录下，并将jquery-3.3.1.min.js文件放在Scripts文件夹中。
此示例代码是一个简化的版本，仅演示了基本的功能。你可能需要根据你的具体需求进行修改和扩展。
原文地址: https://www.cveoy.top/t/topic/is7j 著作权归作者所有。请勿转载和采集!