HTML5的Canvas元素提供了丰富的图形处理能力，通过结合相关API可以实现图片的加载、绘制、裁剪等一系列操作，相比依赖第三方库，原生实现的方式更轻量，也更容易根据需求做定制化调整。
实现图片裁剪的核心步骤
1. 搭建基础页面结构
首先需要准备Canvas元素、文件上传控件、裁剪按钮以及用于展示裁剪结果的容器，基础结构代码如下：
<input type="file" id="upload" accept="image/*"> <canvas id="canvas" width="800" height="500" style="border:1px solid #ccc;"></canvas> <button id="cropBtn">执行裁剪</button> <div id="result"></div>
2. 加载用户上传的图片
通过文件上传控件获取用户选择的图片，将其绘制到Canvas上，为后续裁剪操作做准备：
const upload = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = null;
let imgX = 0, imgY = 0, imgWidth = 0, imgHeight = 0;
upload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = function() {
// 计算图片在Canvas中的适配尺寸，保持比例
const canvasRatio = canvas.width / canvas.height;
const imgRatio = img.width / img.height;
if (imgRatio > canvasRatio) {
imgWidth = canvas.width;
imgHeight = canvas.width / imgRatio;
} else {
imgHeight = canvas.height;
imgWidth = canvas.height * imgRatio;
}
imgX = (canvas.width - imgWidth) / 2;
imgY = (canvas.height - imgHeight) / 2;
// 清空Canvas并绘制图片
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
3. 定义裁剪区域
这里实现一个简单的固定位置裁剪区域，实际开发中可以根据需求添加拖拽调整裁剪区域的功能，固定裁剪区域的参数定义如下：
// 裁剪区域的起始坐标和尺寸
const cropX = 100;
const cropY = 100;
const cropWidth = 200;
const cropHeight = 200;
// 绘制裁剪区域边框，方便用户识别
function drawCropArea() {
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.setLineDash([5, 5]);
ctx.strokeRect(cropX, cropY, cropWidth, cropHeight);
ctx.setLineDash([]);
}
// 图片加载完成后绘制裁剪区域
img.onload = function() {
// 之前的图片适配绘制逻辑
// ...
drawCropArea();
};
4. 实现裁剪逻辑
当用户点击裁剪按钮时，从原Canvas中提取裁剪区域的图像数据，再绘制到新的Canvas中完成裁剪：
const cropBtn = document.getElementById('cropBtn');
const result = document.getElementById('result');
cropBtn.addEventListener('click', function() {
if (!img) {
alert('请先上传图片');
return;
}
// 创建临时Canvas用于存放裁剪结果
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = cropWidth;
tempCanvas.height = cropHeight;
// 从原Canvas中提取裁剪区域的内容
const cropData = ctx.getImageData(cropX, cropY, cropWidth, cropHeight);
tempCtx.putImageData(cropData, 0, 0);
// 将裁剪结果转为图片URL并展示
const cropImgUrl = tempCanvas.toDataURL('image/png');
result.innerHTML = '<p>裁剪结果：</p><img src="' + cropImgUrl + '" alt="裁剪后的图片" style="max-width:300px;">';
});
注意事项
- 如果图片来自跨域地址，需要设置
img.crossOrigin = 'anonymous'，否则调用getImageData时会触发安全错误。 - 裁剪区域的尺寸不能超过Canvas的边界，实际开发中需要添加边界校验逻辑。
- 如果需要支持裁剪区域的拖拽、缩放等交互，需要额外监听鼠标事件，动态更新裁剪区域的坐标和尺寸参数。
- 导出裁剪结果时可以根据需求调整
toDataURL的参数，支持不同的图片格式和压缩质量。