要在网页中实现图片裁剪，不需要引入笨重的第三方库，HTML5原生提供的Canvas接口就能完成从读取、选取到导出的完整流程。裁剪的本质是通过绘图上下文把源图像的某个矩形区域重新绘制到目标画布上，只要控制好源坐标和目标坐标，就能精确截取想要的部分。本文从Canvas基础绘制讲起，逐步加入鼠标交互、跨域处理和导出优化，最后实现一个完整的前端图片裁剪组件。
一、Canvas基础裁剪：drawImage的参数映射
Canvas的2D上下文提供了drawImage方法，它有三种调用形式。最简单的是直接绘制整张图片，但裁剪需要用到九参数版本。这个版本的前四个参数定义源图像上要截取的区域，后四个参数定义目标画布上要绘制的位置和尺寸。例如从原图坐标(100, 50)处截取宽高均为200像素的方形区域，再原样绘制到画布左上角，代码如下。
const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 100, 50, 200, 200, 0, 0, 200, 200);
};
img.src = 'photo.jpg';
这里drawImage的九个参数依次是：图像对象、源区域左上角X、源区域左上角Y、源区域宽度、源区域高度、目标区域左上角X、目标区域左上角Y、目标区域宽度、目标区域高度。如果源区域尺寸和目标区域尺寸不一致，Canvas会自动缩放，利用这个特性可以轻松实现裁剪后压缩或放大。需要注意的是，如果直接使用<img>元素加载图片，必须等图片加载完成后再执行绘制，否则画布可能一片空白。
对于高清屏，Canvas默认使用CSS像素作为坐标系，但设备物理像素可能更高。要让裁剪结果保持清晰，可以先获取设备像素比，再把画布的实际宽高乘以该比值，同时用CSS控制显示尺寸。这样裁剪出的图片在Retina屏幕上就不会模糊。具体做法是读取window.devicePixelRatio，设置canvas.width = cssWidth * ratio，绘制时再通过ctx.scale(ratio, ratio)缩放。
二、交互式裁剪：用鼠标框选目标区域
静态调用drawImage只能裁剪固定区域，实际产品中往往需要用户自己拖动鼠标来选择裁剪范围。常见做法是在Canvas上方覆盖一个绝对定位的矩形框，通过监听鼠标事件计算框的位置和大小。首先准备一个容器，里面放置画布和一个半透明的选区框元素。
<div class="crop-container" style="position: relative; display: inline-block;"> <canvas id="imageCanvas"></canvas> <div id="selectBox" class="crop-box" style="position: absolute; border: 2px dashed #fff; background: rgba(0,0,0,0.4); display: none;"></div> </div>
这里使用position: relative和position: absolute的关键在于让选区框的坐标相对于画布定位。鼠标事件处理时，需要把鼠标在页面中的坐标转换为画布内部的坐标。对于鼠标事件，offsetX和offsetY可以直接拿到相对画布的坐标，但各浏览器对<canvas>的offset计算存在差异，更稳妥的方式是用getBoundingClientRect计算。
下面是一段简化的鼠标拖拽逻辑，使用普通函数避免箭头函数带来的转义问题。mousedown时记录起点，mousemove时动态更新选区框的CSS尺寸，mouseup时结束拖拽。
let startX, startY, isDragging = false;
const canvas = document.getElementById('imageCanvas');
const box = document.getElementById('selectBox');
canvas.addEventListener('mousedown', function(e) {
startX = e.offsetX;
startY = e.offsetY;
isDragging = true;
box.style.display = 'block';
});
canvas.addEventListener('mousemove', function(e) {
if (!isDragging) return;
const currentX = e.offsetX;
const currentY = e.offsetY;
const left = Math.min(startX, currentX);
const top = Math.min(startY, currentY);
const width = Math.abs(currentX - startX);
const height = Math.abs(currentY - startY);
box.style.left = left + 'px';
box.style.top = top + 'px';
box.style.width = width + 'px';
box.style.height = height + 'px';
});
canvas.addEventListener('mouseup', function() {
isDragging = false;
});
移动端需要把mousedown、mousemove、mouseup换成touchstart、touchmove、touchend，并通过e.touches[0].clientX减去画布边界坐标来计算触摸点位置。如果要支持两端，可以同时绑定两组事件，或者抽象出一个统一的坐标获取函数。交互式裁剪的体验还涉及最小选区限制、选区拖拽移动、八方向缩放等，这部分可以基于同样的坐标计算思路逐步扩展。
三、裁剪结果导出与跨域图片处理
用户框选完成后，需要把选区对应的像素从原始画布复制到新的画布上，再导出为图片文件。新建一个与选区同尺寸的Canvas，用drawImage把源画布中选区区域绘制过去，然后调用toDataURL或toBlob生成可下载的数据。toDataURL返回Base64字符串，适合直接赋给链接的href；toBlob返回二进制对象，适合上传到服务器。
function exportCroppedImage() {
const srcCanvas = document.getElementById('imageCanvas');
const cropBox = document.getElementById('selectBox');
const left = parseInt(cropBox.style.left);
const top = parseInt(cropBox.style.top);
const width = parseInt(cropBox.style.width);
const height = parseInt(cropBox.style.height);
if (width < 1 || height < 1) return;
const outputCanvas = document.createElement('canvas');
outputCanvas.width = width;
outputCanvas.height = height;
const ctx = outputCanvas.getContext('2d');
ctx.drawImage(srcCanvas, left, top, width, height, 0, 0, width, height);
const dataURL = outputCanvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'cropped.png';
link.click();
}
如果希望导出为JPEG格式以减小体积，可以给toDataURL传入第二个参数指定压缩质量，范围0到1，例如toDataURL('image/jpeg', 0.85)。质量越低文件越小，但画质也会下降。对于需要上传到服务器的场景，toBlob更为高效，它不会一次性生成完整的Base64字符串占用内存。用法是canvas.toBlob(function(blob) { ... }, 'image/jpeg', 0.9)。
还有一个容易踩坑的地方是跨域图片。如果页面中的图片来自其他域名，直接绘制到Canvas后，画布会被标记为污染状态，此时调用toDataURL会抛出SecurityError。解决办法是在创建Image对象时设置crossOrigin属性为anonymous，并且图片服务器必须返回Access-Control-Allow-Origin响应头。例如加载远程图片时这样写。
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://ipipp.com/photo.jpg';
如果服务端没有正确配置CORS，即使设置了crossOrigin也无法读取像素，只能通过同源代理的方式解决。开发时需要根据实际图片存储位置提前规划。
四、图像处理技巧：圆角裁剪、缩放与旋转
矩形裁剪是最基础的形式，但头像上传等场景通常需要圆形或圆角图片。Canvas的clip方法可以先创建一个圆形路径，之后的所有绘制都会被限制在这个路径内部。先用arc定义圆形区域，调用clip，再绘制源图片，就能得到圆形裁剪结果。
function cropCircle(sourceCanvas, size) {
const output = document.createElement('canvas');
output.width = size;
output.height = size;
const ctx = output.getContext('2d');
ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();
ctx.drawImage(sourceCanvas, 0, 0, size, size);
return output;
}
圆角裁剪类似，可以使用arcTo或roundRect创建圆角矩形路径。需要注意的是，roundRect在部分老版本浏览器中并不支持，如果需要兼容旧环境，可以用arcTo手动构造圆角路径。裁剪完成后如果背景需要透明，可以直接导出为PNG格式；如果需要纯色背景，可以在绘制图片前先填充背景色。
缩放和旋转也是图片编辑的常用操作。缩放已经通过drawImage的目标尺寸控制，旋转则需要先移动坐标原点。典型的旋转裁剪流程是：先计算裁剪区域中心，把画布原点平移到中心，旋转指定角度，再以负的半径偏移绘制图片，这样图片会围绕中心旋转。下面的函数实现了对正方形图片旋转任意角度并输出。
function rotateAndCrop(sourceCanvas, angle) {
const size = Math.min(sourceCanvas.width, sourceCanvas.height);
const output = document.createElement('canvas');
output.width = size;
output.height = size;
const ctx = output.getContext('2d');
ctx.translate(size / 2, size / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(sourceCanvas, -size / 2, -size / 2, size, size);
return output;
}
旋转后如果源图片不是正方形，边缘部分会被裁掉，这是正常的居中裁剪行为。实际产品中可以让用户拖动旋转角度，实时预览旋转效果。结合前面提到的交互式选区、导出方法，你就能够实现一个功能完整的前端图片裁剪模块，而这一切只依赖HTML5原生能力，不需要加载任何额外脚本。
HTML5图片裁剪Canvas图片处理图像处理技巧修改时间：2026-10-01 11:40:37