真正上传圆形头像必须像素级裁剪：用canvas按圆形区域提取图像生成新blob或data url再提交，而非仅用border-radius遮罩。
为什么直接用 border-radius: 50% 不算真正上传圆形头像
它只是视觉遮罩：图片原始尺寸、宽高比、像素数据全没变，overflow: hidden 和 border-radius 只在浏览器渲染层“盖住四角”，上传后后端拿到的仍是完整矩形图。常见后果包括：微信内嵌页放大时露白边、截图分享变方图、iOS WebView 中圆角失效。
真正可上传的圆形头像，必须是像素级裁剪——即用 canvas 把图像内容按圆形区域提取出来，生成新图像数据（Blob 或 Data URL）再提交。
用 cropperjs 实现可交互圆形裁剪上传
不建议手写 canvas 裁剪逻辑，cropperjs 是目前最稳的选择：支持拖拽缩放、旋转、圆形预览，且内部已封装好像素级圆形裁剪（非 CSS 遮罩）。
- 初始化前确保图片已加载完成，否则
cropperjs会报"Image load failed" - 必须设置
aspectRatio: 1，否则裁剪框不是正方形，后续无法生成真圆形 - 调用
getCroppedCanvas({ width: 200, height: 200 })显式指定输出尺寸，避免默认 canvas 尺寸失真 - 导出时用
toBlob而非toDataURL：前者异步、体积小、无 base64 解码开销；后者在 IE 或长图下易触发 URL 长度限制 - 若后端要求 PNG（如需透明背景），加参数
imageType: 'image/png'；JPG 更小但可能产生白边
canvas.toBlob() 导出后怎么塞进 FormData
很多人卡在这步：拿到 canvas 却不知如何转成可上传的 File 或 Blob。核心就一句：
croppedCanvas.toBlob(
(blob) => {
const file = new File([blob], 'avatar.png', { type: 'image/png' });
const formData = new FormData();
formData.append('avatar', file);
// 后续 fetch(formData)...
},
'image/png',
0.92
);
注意：toBlob 是异步回调，不能直接 return；Safari 旧版不支持 quality 参数，建议固定传 0.92 或省略；上传前可检查 blob.size > 2 * 1024 * 1024 并提示用户重选或压缩。
移动端和微信 WebView 的兼容性雷区
iOS 15+ 和部分微信版本对 canvas.clip() 行为有差异：有时边缘发虚、抗锯齿异常，或裁剪区域轻微偏移。
- 绕过方案：不用
clip()，改用globalCompositeOperation = 'destination-in'+ 圆形 mask 图片 - 更稳妥做法：双层 canvas —— 底层画实心圆，上层 drawImage 后设
globalCompositeOperation = 'source-atop' - 微信 JSSDK 上传前，建议用
toDataURL('image/jpeg', 0.92)替代 PNG，体积更小、兼容性更好
真正圆形上传的关键不在“怎么显示圆”，而在“怎么让后端收到圆”。所有前端显示技巧（border-radius、clip-path）都只是预览手段，最终必须靠 canvas 像素操作生成新图像数据——这一步漏掉，上传的永远是方图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
