纯CSS可通过border-radius配合overflow:hidden实现图片圆角裁剪，需确保宽高相等且设object-fit:cover；clip-path支持更灵活裁剪但兼容性较差；Canvas仅用于需生成新图像数据的场景。
直接用 border-radius 实现视觉圆角，但不裁剪图片内容
HTML5 本身没有“图片裁剪”这个独立功能，border-radius 只是给元素（包括 <img>）加圆角边框，它让图片**显示区域变圆**，但图片原始尺寸和内容没被修改。只要父容器或图片自身设置了 overflow: hidden，超出圆角的部分就会被裁掉——这才是实际生效的关键。
常见错误：只写 border-radius: 50% 却忘了设 overflow: hidden，结果圆角没效果；或者图片宽高不等，50% 导致椭圆而非正圆。
- 要得到正圆形头像，必须确保
width和height相等，再配border-radius: 50% - 如果图片是响应式（比如
width: 100%; height: auto），border-radius仍生效，但圆角半径按当前宽高计算，可能失真 - 不用 JS 或 Canvas，纯 CSS 就能完成，兼容所有现代浏览器（Chrome 4+、Firefox 4+、Safari 5+、Edge 全版本）
用 <div> 包裹 <img> 确保可靠裁剪
单独对 <img> 设置 border-radius 在某些旧版 Safari 或 Android WebView 中有渲染偏差。更稳妥的做法是用一个 <div> 作为容器，控制裁剪边界。
<div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden;"> <img src="avatar.jpg" alt="头像" style="width: 100%; height: 100%; object-fit: cover;"> </div>
这里 object-fit: cover 很关键：它让图片等比缩放并填满容器，自动居中裁剪多余部分，避免拉伸变形。若用 contain，则会留白；若不用该属性，图片可能被拉宽或压扁。
立即学习“前端免费学习笔记（深入）”；
需要精确控制裁剪区域？用 clip-path 替代 border-radius
border-radius 只支持圆角矩形或椭圆，不能做任意形状裁剪；而 clip-path 支持 circle()、ellipse()、polygon()，更适合复杂需求。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
例如实现正圆裁剪且支持偏移中心：
<img src="avatar.jpg" alt="头像" style="width: 120px; height: 120px; clip-path: circle(60px at 60px 60px);">
-
circle(60px at 60px 60px)表示半径 60px、圆心在 (60px, 60px) 的圆 - 相比
border-radius，clip-path对非正方形图片也稳定输出正圆（只要手动算好圆心坐标） - 注意兼容性：
clip-path在 IE 完全不支持，Android 4.4 及更早版本也无效；如需兼容，得降级回border-radius+ 容器方案
Canvas 动态裁剪仅在必须改图数据时才用
如果后端无法提供合适尺寸的图片，或需要用户上传后实时生成圆形头像并保存为新文件（比如用于 API 提交），才需要用到 Canvas 手动绘制。
核心逻辑是：创建 <canvas>，获取上下文，用 arc() 画圆路径，调用 clip()，再用 drawImage() 绘制原图——此时只显示圆内区域。
但要注意：
- Canvas 裁剪后导出的图片是新图像数据，体积和原图一致，不会自动压缩
- 跨域图片（如 CDN 地址）需服务端设置
CORS头，否则toDataURL()会触发安全错误 - 移动端 Canvas 渲染性能不如 CSS，频繁操作建议节流或用 Web Worker 分离
多数场景下，CSS 方案已足够；Canvas 是兜底手段，不是首选。
