直接用Canvas将头像自动裁成正方形：先用img.naturalWidth/Height获取原图真实尺寸，再以较小值为边长居中截取，最后用drawImage精确绘制到等宽高canvas上并导出JPEG。
直接用 Canvas 把头像自动裁成正方形，核心就三点：取原图最小边长、居中截取、重绘到等宽高的 canvas 上。不需要用户拖拽，也不依赖第三方库，纯前端实现，兼容 PC 和移动端。
获取原始图片真实尺寸
关键不能用 img.width 或 img.height，它们返回的是 CSS 渲染尺寸，可能被拉伸或缩放。必须用 img.naturalWidth 和 img.naturalHeight 获取原始像素大小。
- 创建
Image对象，监听onload - 加载完成后立刻读取
img.naturalWidth和img.naturalHeight - 若其中一个是 0（如跨域图片未设置
crossOrigin），需提示用户或 fallback 处理
计算正方形裁剪区域
以宽高中的较小值为边长，从图片中心向四周扩展，得到居中矩形区域。
- 设
min = Math.min(img.naturalWidth, img.naturalHeight) - 源图裁剪起始点：
sx = (img.naturalWidth - min) / 2，sy = (img.naturalHeight - min) / 2 - 裁剪宽高均为
min，确保输出为严格正方形
绘制并导出正方形图像
新建 canvas，设其 width 和 height 均为 min，再用 9 参数 drawImage 精确贴入裁剪区域。
立即学习“前端免费学习笔记（深入）”；
- 调用
ctx.drawImage(img, sx, sy, min, min, 0, 0, min, min) - 导出时建议用
toDataURL('image/jpeg', 0.9)，避免 PNG 体积过大 - 如需白底（防止透明背景在 JPEG 中变黑），先执行
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, min, min)
不复杂但容易忽略细节。只要对齐 natural 尺寸、算准居中偏移、用对 drawImage 参数，就能稳定产出标准头像图。
