html5 canvas 实现圆形头像裁剪与预览的核心是先用 arc() 绘制圆形路径并调用 clip() 设定裁剪区，再等比缩放居中绘制图片，最后用 todataurl() 导出带透明背景的圆形 png 图片。
在 HTML5 Canvas 中实现图片的圆形头像裁剪与预览，核心是利用 clip() 方法配合圆形路径（arc()），将绘制区域限制为圆内，再把原图绘制进去。整个过程不修改原始图片文件，纯前端实时渲染，适合头像上传前的预览场景。
1. 创建 Canvas 并加载图片
先准备一个 <canvas></canvas> 元素和一张待处理的图片（可通过 <input type="file"> 选择）：
- 获取 canvas 的 2D 上下文：
const ctx = canvas.getContext('2d'); - 用
URL.createObjectURL(file)快速生成本地图片 URL - 创建
Image对象并监听onload，确保图片加载完成后再绘制
2. 设置画布尺寸并居中绘制圆形裁剪区
为保证头像显示清晰，建议将 canvas 宽高设为固定值（如 200×200），并让圆形裁剪区居中：
- 设置 canvas 宽高：
canvas.width = canvas.height = 200; - 计算圆心坐标：
const cx = canvas.width / 2, cy = canvas.height / 2, radius = Math.min(cx, cy) - 4;（减去边距避免裁切边缘） - 开始路径、绘制圆形、调用
ctx.clip()激活裁剪区域
3. 绘制图片并保持比例居中
直接 drawImage() 可能拉伸变形，应按“等比缩放+居中裁剪”逻辑绘制：
- 计算缩放比例：
const scale = Math.min(canvas.width / img.width, canvas.height / img.height); - 算出绘制起始点：
const x = (canvas.width - img.width * scale) / 2;，const y = (canvas.height - img.height * scale) / 2; - 执行绘制：
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
4. 获取裁剪后的圆形头像数据（可选导出）
若需保存或上传，调用 canvas.toDataURL('image/png') 即可获得 PNG 格式圆形头像 base64 字符串：
- 注意：
toDataURL()返回的是完整 canvas 内容 —— 由于已用clip()限制绘图区域，空白处自动透明，结果就是带 alpha 通道的圆形图 - 如需 JPEG 格式且背景为白色，可在 clip 前先
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height);
不复杂但容易忽略细节：必须在 drawImage() 前调用 clip()，且 clip() 仅对后续绘制生效；图片必须完全加载后才能绘制，否则 canvas 显示为空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
