使用JavaScript实现一个简单的图片裁剪工具_javascript图形学

<input type="file" id="imageLoader" accept="image/*">
<canvas id="imageCanvas" style="border: 1px solid #ccc;"></canvas>
<button id="cropButton" disabled>裁剪图片</button>
<div id="output"></div>

const imageLoader = document.getElementById('imageLoader');
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
const cropButton = document.getElementById('cropButton');
const output = document.getElementById('output');
<p>let img = new Image();
let startX, startY, currentX, currentY;
let isDragging = false;</p><p>// 加载图片
imageLoader.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
img.onload = function() {
// 设置画布大小与图片一致
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
cropButton.disabled = false;
};
};
reader.readAsDataURL(file);
}
});</p><p>// 鼠标按下 - 开始绘制裁剪框
canvas.addEventListener('mousedown', function(e) {
const rect = canvas.getBoundingClientRect();
startX = e.clientX - rect.left;
startY = e.clientY - rect.top;
isDragging = true;</p><p>// 清除上次的框
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
});</p><p>// 鼠标移动 - 更新裁剪框
canvas.addEventListener('mousemove', function(e) {
if (!isDragging) return;
const rect = canvas.getBoundingClientRect();
currentX = e.clientX - rect.left;
currentY = e.clientY - rect.top;</p><p>// 重绘画布和实时框
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);</p><p>const width = currentX - startX;
const height = currentY - startY;</p><p>ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.strokeRect(startX, startY, width, height);
});</p><p>// 鼠标抬起 - 结束选择
canvas.addEventListener('mouseup', function() {
isDragging = false;
});</p><p>// 裁剪按钮点击事件
cropButton.addEventListener('click', function() {
if (!startX || !startY || !currentX || !currentY) return;</p><p>const width = Math.abs(currentX - startX);
const height = Math.abs(currentY - startY);
const sx = Math.min(startX, currentX);
const sy = Math.min(startY, currentY);</p><p>// 创建新 canvas 存放裁剪结果
const croppedCanvas = document.createElement('canvas');
croppedCanvas.width = width;
croppedCanvas.height = height;
const cctx = croppedCanvas.getContext('2d');
cctx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);</p><p>// 显示裁剪结果
const dataUrl = croppedCanvas.toDataURL('image/png');
const imgEl = document.createElement('img');
imgEl.src = dataUrl;
output.innerHTML = '<h3>裁剪结果：</h3>';
output.appendChild(imgEl);
});</p>

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);