canvas头像压缩需先缩尺寸再控质量，输出200×200、jpeg/webp格式、质量0.7–0.8，用toblob导出blob，注意透明图填白底、内存释放及体积校验。

直接在头像上传前用 Canvas 压缩，核心是：先缩尺寸、再控质量、最后导出 Blob。HTML 本身不参与压缩，它只负责展示或提交——真正起作用的是你传给 <img> 或后端的那张图。头像场景通常要求小尺寸（如 200×200）、高辨识度、体积轻（

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

明确压缩目标再动手

头像不是高清海报，不需要保留原图细节。常见合理目标： - 输出尺寸：统一缩放到 200×200 或按宽高比等比缩放至最长边 ≤ 200px - 格式优先选 image/jpeg（无透明需求）或 image/webp（支持透明且体积更小） - 质量参数设为 0.7–0.8：视觉清晰、体积下降明显；低于 0.6 易出现色块，高于 0.9 体积节省有限 - 若原始图带透明（如 PNG 头像），转 JPEG 会变白底；要么加 canvas 白底填充，要么改用 webp + `` fallback

关键步骤：读取 → 缩放 → 绘制 → 导出

整个流程不依赖后端，纯前端完成： - 用 `FileReader` 读取用户选择的文件，转成 `dataURL` - 创建 `Image` 对象加载该 dataURL，监听 `onload` - 计算目标尺寸：比如限制最长边 ≤ 200px，保持宽高比 - 创建 `canvas`，设其 `width`/`height` 为目标尺寸 - 用 `ctx.drawImage(img, 0, 0, targetWidth, targetHeight)` 绘制（浏览器自动重采样降质） - 调用 `canvas.toBlob(callback, 'image/jpeg', 0.75)` 获取压缩后的 Blob（推荐，比 toDataURL 更省内存）

注意几个易错点

- 别只调质量不缩尺寸：一张 3000×2000 的图，即使 quality=0.7，体积仍可能超 500KB；必须先缩到 200px 级别 - 透明图处理要主动：PNG 头像含 alpha，若强行转 JPEG，canvas 默认透明区域渲染为黑色；需提前 `ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h);` 填白底 - 大图慎用 toDataURL：iOS Safari 对大图调 `toDataURL` 可能触发内存警告；优先用 `toBlob`，上传时直接传 Blob 或构造 `FormData` - 释放临时资源：`URL.createObjectURL(img.src)` 后记得 `URL.revokeObjectURL()`，避免内存泄漏

上传前验证与替换

压缩完成后，可做轻量校验再提交： - 检查生成 Blob 大小：`if (blob.size > 100 * 1024) { alert('压缩后仍超 100KB，请重选'); return; }` - 预览效果：用 `URL.createObjectURL(blob)` 赋给预览 ``，让用户确认是否可用 - 构造 FormData 提交： ```js const formData = new FormData(); formData.append('avatar', blob, 'avatar.jpg'); // 第三参数指定文件名和扩展名 fetch('/upload', { method: 'POST', body: formData }); ```

不复杂但容易忽略细节。关键是把“缩尺寸”放在“调质量”前面，再配合适当格式和清理动作，头像压缩就能又稳又轻。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！