border-radius: 50% 仅视觉遮罩不裁剪内容，原始图片仍为矩形；真正圆形头像需 canvas 像素级裁剪，通过 arc()+clip() 或 globalCompositeOperation 实现可交互、可上传的圆形输出。
直接用 border-radius: 50% 只能“视觉上”变圆，不能真正裁剪图片内容；要实现可交互的圆形头像裁剪预览，必须结合 或现代图像处理 API，纯 CSS 不行。
为什么 border-radius: 50% 不算真正裁剪
它只是盖住溢出部分，原始图片宽高、尺寸、比例全都没变。上传后后端拿到的仍是完整矩形图，前端显示的“圆”在截图、打印或某些 WebView 中可能失效。
常见错误现象：
– 头像上传后变成方图，用户困惑“我明明看到是圆的”
– 微信内嵌页点击放大，圆形遮罩消失露出四角
– 截图分享时圆角不生效
- 仅用于静态展示（如用户资料页头像）可用
border-radius - 涉及上传、编辑、预览流程，必须走像素级裁剪
- 若需支持缩放/拖拽/旋转，
是最可控的方案
用
本质是把原图按圆心和半径，在 canvas 上用 arc() + clip() 切出圆形区域，再绘制进去。
关键代码逻辑（简化示意）：
const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
const size = Math.min(img.width, img.height);
canvas.width = size;
canvas.height = size;
<p>ctx.beginPath();
ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.clip(); // 关键：裁剪路径生效</p><p>ctx.drawImage(img, (img.width - size) / 2, (img.height - size) / 2, size, size, 0, 0, size, size);</p>
- 务必先调用
ctx.clip()，否则arc()只画线不裁剪 -
drawImage()的源坐标需居中截取，避免拉伸变形 - 若原图非正方形，建议前端先等比缩放+居中裁切为正方形，再套圆形
- 导出为 Blob 时用
canvas.toBlob(callback, 'image/png', 0.9)，避免 JPEG 白边
移动端 Safari 和微信 WebView 的兼容注意点
iOS 15+ 和部分微信版本对 canvas.clip() 行为有差异：有时会保留抗锯齿导致边缘发虚，或 clip 区域偏移。
- 绕过方案：不用
clip()，改用globalCompositeOperation = 'destination-in'配合圆形 mask 图片 - 更稳妥做法：用两层 canvas —— 底层画圆（fill），上层 drawImage 后设
globalCompositeOperation = 'source-atop' - 微信 JSSDK 上传前，务必用
canvas.toDataURL('image/jpeg', 0.92)而非 PNG，减少体积且兼容性更好 - 不要依赖
img.naturalWidth在 iOS 上立即可用，需监听img.onload后再读取
真正裁剪不是加个 class 就完事；canvas 坐标算错一个像素，圆心就偏了；iOS clip 行为不一致，得备好 fallback；导出格式、质量、 MIME 类型选错，后端解析就报错。这些细节堆起来，才是“能上线”的圆形头像裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
