Canvas头像上传预览核心为三步：选图→渲染→居中缩放；用URL.createObjectURL或FileReader读取图片，按devicePixelRatio适配canvas防模糊，再通过drawImage实现cover效果，最后裁剪上传。
网页端用 Canvas 实现头像上传的预览功能，核心是三步：选图 → 渲染到 Canvas（或 img）→ 居中缩放展示在固定容器内。不需要后端参与，纯前端就能完成实时预览。
选图并读取为可渲染格式
用户点击上传按钮后，触发 <input type="file">，监听 change 事件获取 File 对象：
- 推荐用
URL.createObjectURL(file)快速生成临时 URL，赋值给<img>的 src，立刻可见 - 也可用
FileReader.readAsDataURL()，返回 base64 字符串，适合需要后续处理（如加水印、压缩）的场景 - 注意限制
accept="image/*"和单文件（multiple去掉），避免误选非图文件
让图片自适应正方形裁剪框居中显示
头像区域通常是 150×150px 或 200×200px 的圆角/正方形容器。原始图片宽高比各异，需模拟 object-fit: cover 效果：
- 先获取图片真实尺寸：
img.naturalWidth/naturalHeight - 计算缩放比例：
scale = Math.max(containerSize / w, containerSize / h) - 绘制时偏移居中：
ctx.drawImage(img, (w - containerSize/scale)/2, (h - containerSize/scale)/2, containerSize/scale, containerSize/scale, 0, 0, containerSize, containerSize) - 这样能确保图片“核心区域”完整覆盖裁剪框，不拉伸不变形
Canvas 预览要防模糊（尤其高清屏）
直接设置 canvas.style.width/height 会导致 Retina 屏下模糊，必须适配设备像素比：
- 设容器 CSS 尺寸（如 200px × 200px），保持布局稳定
- 按
window.devicePixelRatio放大 canvas 实际宽高：canvas.width = 200 * dpr - 再调用
ctx.scale(dpr, dpr)，让绘图坐标系对齐物理像素 - 否则即使图片清晰，canvas 绘制出来也会发虚
预览完成后衔接裁剪与上传
预览只是第一步，后续操作依赖清晰的 canvas 输出：
- 用 Cropper.js 等库时，它内部也是基于 canvas 渲染预览，你只需传入 img 元素或 URL
- 裁剪确认后，调
cropper.getCroppedCanvas().toBlob(blob => {...})获取裁剪后的 Blob - 把 Blob 加入 FormData，用 fetch 或 XMLHttpRequest 提交，服务端接收的就是标准图片二进制流
- 若需压缩，可在 toBlob 前调整 canvas 尺寸（如统一缩到 400×400），或指定 quality 参数（仅 JPEG）
