纯前端实现圆形头像上传预览的关键是三者协同：正方形容器（宽高相等）、overflow: hidden 裁剪溢出、img 配 object-fit: cover 防变形；大图预览应优先用 url.createobjecturl() 避免 readasdataurl 卡顿，需手动 revoke 释放内存；真圆形上传必须用 canvas 像素级裁剪并居中截取正方形区域。
纯前端实现圆形头像上传预览，关键不在“怎么画圆”，而在“怎么让圆不破、图不糊、交互不卡”——border-radius: 50%只是表象，真正起作用的是容器约束 + 图片裁切 + 文件读取路径的配合。
为什么直接给 <img> 加 border-radius: 50% 有时不圆
这不是 CSS 失效，而是三个条件没同时满足：
- 父容器必须是正方形（
width和height相等），否则border-radius: 50%产出的是椭圆 - 父容器必须带
overflow: hidden，否则图片四角会溢出圆框外 -
<img>自身要配object-fit: cover（不能只靠width: 100%; height: 100%），否则拉伸变形后，圆框里塞的是扭曲图
常见现象：本地开发看着圆，上线后变方——大概率是父容器宽高被响应式样式撑开不等了，或 object-fit 被重置。
FileReader.readAsDataURL() 预览大图卡顿怎么办
5MB 以上图片调用 readAsDataURL() 会生成超长 base64 字符串，触发主线程阻塞，尤其在低端 Android 或 iOS Safari 上明显卡顿甚至白屏。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 优先用
URL.createObjectURL(file)替代：它返回一个临时 blob URL，毫秒级生效，内存占用低 - 但注意：每次调用都会创建新 URL，必须手动
URL.revokeObjectURL()释放，否则内存泄漏 - 若需压缩或裁剪（比如强制转成 200×200 圆形），就不能跳过
FileReader，得走<canvas></canvas>流程，此时建议先用file.size拦截，比如if (file.size > 2 * 1024 * 1024) { alert('请上传小于 2MB 的图片'); return; }
上传前就裁成圆形？<canvas></canvas> 是唯一可控方案
border-radius 只是遮罩，后端收到的仍是原始矩形图。如果业务要求“用户看到的就是最终上传的圆形图”，必须像素级裁剪。
- 核心逻辑：先用
FileReader或URL.createObjectURL()把图加载进<img>，再绘制到<canvas></canvas> - 裁圆关键两步：
ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.clip();，之后再drawImage() - 导出时用
canvas.toBlob(callback, 'image/png', 0.9)，避免 JPEG 在透明边缘产生灰边 - 别忘了：原图非正方形时，先居中截取正方形区域，再套圆，否则会偏心或缺角
input 样式改不了？用 <label></label> 包裹才是正解
原生 <input type="file"> 的按钮部分无法用 CSS 精确控制文字、颜色、圆角，强行 hack 容易在 Safari 或新版 Chrome 失效。
- 把
input视觉隐藏：position: absolute; width: 0; height: 0; opacity: 0; - 用
<label for="avatarInput">点击上传头像</label>关联，点击即触发选择弹窗 - 这样既能自定义按钮样式（加
border-radius、background、图标），又保留语义和可访问性
容易被忽略的是：移动端 iOS Safari 对 change 事件触发更严格，务必检查 event.target.files.length > 0 再执行后续逻辑，否则取消选择后再次点击可能无响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
