头像裁剪需在提交前完成可预览、可调整、可导出的像素级闭环流程：选图→可视化裁剪框→拖拽缩放→坐标映射→canvas绘制→生成真实文件。
个人中心表单里的头像裁剪，核心不是“上传完再处理”，而是让用户在提交前就完成可预览、可调整、可导出的像素级裁剪。整个流程必须闭环：选图 → 可视化裁剪框 → 拖拽缩放 → 映射到原图坐标 → canvas 绘制 → 生成真实图像文件。
选图后立刻显示可操作的裁剪界面
用 <input type="file" accept="image/*"> 获取文件，但别用 FileReader.readAsDataURL 转 base64——大图会卡顿。直接用 URL.createObjectURL(file) 生成临时 URL，赋给 <img> 的 src。外层容器设 position: relative，裁剪框用 position: absolute 叠在图片上，初始宽高建议设为图片渲染尺寸的 70%，避免一上来就占满。
拖拽与缩放必须同步校正坐标
- 拖拽时监听
mousedown+mousemove，并调用event.preventDefault()防止图片被浏览器默认拖走 - 缩放靠
wheel事件配合transform: scale()，origin 设为鼠标位置（不是 center），否则缩放中心偏移 - 缩放范围限制在 0.5～3.0 倍，超出直接 return，避免失控
- 每次缩放或拖拽后，裁剪框的
left/top和宽高都要重算，确保始终在图片可视区域内
关键：把页面坐标准确换算成原始像素坐标
用户看到的是裁剪框在页面上的位置（getBoundingClientRect()），但 canvas 绘制需要的是「在原图上取哪一块」。必须分两步校正：
- 先算缩放比：
scaleX = img.naturalWidth / img.offsetWidth，scaleY = img.naturalHeight / img.offsetHeight - 再换算坐标：
sourceX = cropLeft * scaleX，sourceY = cropTop * scaleY，sourceWidth = cropWidth * scaleX，sourceHeight = cropHeight * scaleY - 注意：如果页面有 CSS 缩放（如移动端 viewport 缩放）或 devicePixelRatio 影响，还得用
canvas.width / canvas.clientWidth再套一层校正
导出头像必须走 canvas 绘制，不能只截 DOM
点击“确认裁剪”时，创建临时 <canvas></canvas>，设置目标宽高（如 200×200），然后调用 9 参数版 ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)。重点：
-
sx/sy/sw/sh是上一步换算出的原始图像素值，不是页面坐标 - 要圆形头像？先
ctx.beginPath(); ctx.arc(w/2, h/2, w/2, 0, Math.PI*2); ctx.clip();，再 drawImage - 导出用
canvas.toBlob(callback, 'image/jpeg', 0.85)，JPEG 避免白边黑底，质量 0.85 平衡体积与清晰度 - 拿到 blob 后，用
URL.createObjectURL(blob)赋给头像预览图，同时存入表单隐藏域或 FormData，随表单一起提交
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
