HTML5矩形裁剪最可控，需用<canvas>+JS：读取图片→绘制到canvas→监听事件画矩形选框→drawImage按原图坐标裁剪→toBlob导出。
用 <canvas> 手动实现矩形裁剪最可控
HTML5 本身没有内置的“图片裁剪”标签或 API，所谓“HTML5 实现裁剪”，实际是靠 <canvas> + JavaScript 模拟交互式选区 + 绘制裁剪区域。矩形裁剪是最常用、兼容性最好、逻辑最清晰的起点。
关键步骤：
- 用
<input type="file">读取用户上传的图片（FileReader转为data URL） - 将图片绘制到
<canvas>上，监听鼠标/触摸事件画出可拖拽缩放的矩形选框（推荐用getBoundingClientRect()校准坐标，避免缩放/滚动偏移） - 裁剪时调用
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)—— 注意前四个参数是原图坐标，不是 canvas 显示坐标 - 用
canvas.toDataURL('image/png')或canvas.toBlob()导出裁剪结果
const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
// 假设已确定裁剪区域：x=50, y=30, width=200, height=150
const croppedCanvas = document.createElement('canvas');
croppedCanvas.width = 200;
croppedCanvas.height = 150;
const cCtx = croppedCanvas.getContext('2d');
cCtx.drawImage(img, 50, 30, 200, 150, 0, 0, 200, 150);
const croppedDataUrl = croppedCanvas.toDataURL('image/jpeg', 0.9);
};圆形裁剪必须用 clip() 配合路径
矩形裁剪靠 drawImage 的源区域参数就能搞定；但圆形、椭圆、多边形等非矩形形状，必须用 ctx.clip() 先定义裁剪路径，再绘制整张图——否则会漏掉边缘或变形。
常见误区：直接对 canvas 设置 border-radius 只是视觉遮罩，导出时仍是完整矩形。
立即学习“前端免费学习笔记（深入）”；
- 先用
ctx.beginPath()+ctx.arc()画圆 - 立即调用
ctx.clip()（注意：clip 只对后续绘制生效） - 再用
ctx.drawImage(img, 0, 0)绘制原图，超出圆形的部分自动被裁掉 - 若需居中裁剪，计算圆心为
canvas.width / 2、canvas.height / 2，半径取二者最小值的一半
ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2, 0, Math.PI * 2); ctx.clip(); ctx.drawImage(img, 0, 0); // 此时只显示圆形区域
canvas.toBlob() 比 toDataURL() 更适合生产环境
toDataURL() 返回 base64 字符串，体积比原始二进制大 ~33%，上传慢、内存占用高，且无法控制压缩质量（JPEG 场景下尤其明显）。toBlob() 直接生成 Blob 对象，可直接传给 FormData 提交，也便于用 URL.createObjectURL() 预览。
- Chrome/Firefox/Edge 16+ 支持
toBlob()，Safari 14.1+ 开始支持（iOS Safari 14.5+） - 调用时注意第三个参数仅对
image/jpeg和image/webp有效，image/png忽略 - 务必在
drawImage完成后再调用，否则得到空白 Blob
移动端触摸事件必须处理 touchstart/touchmove/touchend
仅监听 mousedown 在手机上完全失效。裁剪框的拖拽、缩放操作在 iOS/Android 上必须同时绑定触摸事件，并阻止默认行为（e.preventDefault()），否则会触发页面滚动或双指缩放。
- 用
e.touches[0].clientX替代e.clientX，并统一用getBoundingClientRect()计算相对于 canvas 的坐标 - 双指缩放需监听
touches长度和间距变化，不要依赖gesturestart（已被废弃） - iOS Safari 中
<input type="file">默认唤起相机，加accept="image/*" capture="user"可强制前置摄像头
真正容易被忽略的是：裁剪坐标的基准必须始终是原图尺寸（naturalWidth/naturalHeight），而不是 canvas 的显示宽高。一旦 canvas 被 CSS 缩放，或图片被拉伸显示，所有鼠标坐标都要按比例换算回原始像素，否则裁出来的图会严重错位。
