H5页面实现头像圆形裁剪预览的核心是Canvas渲染+圆形遮罩+实时缩放拖拽：先用FileReader读取图片并设置crossOrigin；再用CSS radial-gradient做圆形遮罩；最后通过canvas.clip()和drawImage实现实时裁剪输出。
在 H5 页面中实现上传头像时的圆形裁剪框实时预览，核心是：用 Canvas 渲染原始图片 + 圆形遮罩 + 实时缩放/拖拽控制。不依赖第三方库也能完成，关键是把“裁剪逻辑”和“预览渲染”分离清楚。
1. 选择图片并读取为 canvas 可绘制源
用户选择文件后，用 FileReader 读取为 data URL，再绘制到隐藏的 canvas（用于后续裁剪计算），同时把该 URL 赋给一个 img 元素（用于显示可操作的预览图）：
- 确保 img 设置
crossOrigin="anonymous"（避免跨域导致 canvas 绘制失败） - img 加载完成后，获取其自然宽高，用于后续等比缩放和裁剪区域计算
2. 构建圆形裁剪容器与交互层
用一个固定尺寸的 div 容器（如 200×200px）作为裁剪视口，内部包含：
- 背景层：灰色半透明 overlay（覆盖非圆形区域）
- 遮罩层：用 radial-gradient 或 canvas 绘制圆形透明孔洞（推荐 CSS 方案更轻量）
- 图片层：img 元素，通过 transform: scale() + translate() 实现缩放与拖拽
例如遮罩 CSS：
mask: radial-gradient(circle at center, transparent 50%, black 50%);<br>/* 或兼容性写法：-webkit-mask */
3. 实时更新预览图（裁剪后效果）
每次缩放或拖拽结束（或节流后），用 canvas 执行「圆形裁剪」：
- 创建目标 canvas（如 120×120px，即头像最终尺寸）
- 设置 canvas 上下文的 clip() 区域为圆形（
arc(x,y,r,0,Math.PI*2)） - 将 img 按当前缩放/偏移位置，drawImage 到 canvas 中
- 调用
canvas.toDataURL('image/png')得到裁剪后图片，赋给预览 img 或提交用的 hidden input
4. 优化体验细节
提升可用性的小技巧：
- 默认居中显示图片，初始缩放适配短边（保证完整头像可见）
- 双指缩放用 touchmove + scale 计算，单指拖拽用 mousedown/move 记录偏移
- 限制最小/最大缩放值（如 0.8～2.5），避免图片过小看不清或过大溢出
- 点击「确定」前，可加一层半透明蒙版 + 文字提示「松开手指确认裁剪」
整个流程不复杂但容易忽略 canvas 的像素对齐和跨域问题。只要 img 加了 crossOrigin、clip 路径闭合、缩放中心点算准，就能稳定跑起来。
