直接用canvas裁剪圆角矩形头像并导出base64需两步：先用clip()定义圆角路径（现代浏览器用roundrect，旧版手动绘制），再绘制图片并居中缩放；最后调用todataurl()导出，注意跨域设置和尺寸校验。
直接用 canvas 裁剪出圆角矩形头像并导出 Base64，核心是两步：先在 canvas 上用 clip() 定义圆角矩形路径，再绘制图片；最后调用 toDataURL() 获取 Base64 字符串。不能只靠 CSS 的 border-radius，那只是显示遮罩，导出仍是原始矩形。
1. 创建圆角矩形裁剪路径
Canvas 本身不支持“直接绘制裁剪后的圆角图”，必须手动设置裁剪区：
- 调用
ctx.beginPath()开始新路径 - 用
ctx.roundRect(x, y, width, height, radii)（Chrome 111+、Firefox 112+、Safari 17.4+ 支持）快速画圆角矩形 - 若需兼容旧浏览器，改用手动绘制四段弧线 + 直线（
arcTo或arc+lineTo） - 立即执行
ctx.clip()—— 注意：它只影响后续的绘制操作
2. 绘制图片并确保内容居中适配
裁剪路径设好后，再把图片完整绘制进去，超出圆角区域的部分会被自动裁掉：
- 图片要等
img.onload触发后再绘制，否则 canvas 是空的 - 推荐将图片缩放后居中填满裁剪区域：计算缩放比，用
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) - 例如裁剪区域为 200×200、圆角半径 20，可设 canvas 宽高为 200，然后把图片等比缩放居中绘制到该区域
3. 导出为 Base64 并处理常见问题
调用 toDataURL() 前必须确认 canvas 已完成绘制，且未被跨域污染：
- 如果图片来自其他域名（如 CDN），务必设置
img.crossOrigin = "anonymous"，并确保服务端返回Access-Control-Allow-Origin头 - 导出格式建议用
"image/png"（保留透明背景）或"image/jpeg"（体积更小）；JPEG 下若有透明区域，先填白底：ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height) - 避免直接返回
"data:, "或黑图：检查是否漏了img.onload包裹、是否跨域失败、是否 canvas 尺寸为 0
4. 完整简易示例（含圆角绘制与导出）
以下代码适用于现代浏览器（支持 roundRect）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = '/avatar.jpg';
<p>img.onload = () => {
const size = 200;
canvas.width = size;
canvas.height = size;</p><p>// 清空并设置圆角裁剪区（r = 24）
ctx.clearRect(0, 0, size, size);
ctx.beginPath();
ctx.roundRect(0, 0, size, size, 24); // 圆角半径 24px
ctx.clip();</p><p>// 居中绘制缩放后的图片
const scale = Math.max(size / img.naturalWidth, size / img.naturalHeight);
const w = img.naturalWidth <em> scale;
const h = img.naturalHeight </em> scale;
ctx.drawImage(img, (size - w) / 2, (size - h) / 2, w, h);</p><p>// 导出 Base64
const base64 = canvas.toDataURL('image/png');
console.log(base64); // data:image/png;base64,...
};</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
