我需要将绘制的图像（来自 base64 编码）保存到圆角画布中。画布使用以下方式定义：
<canvas id="thumbnailImage" width="86" height="86" style="border:1px solid #d3d3d3;border-radius:10px;">
图像按预期显示（使用 ctx.drawImage 等...），带有圆角。然后我使用
获取圆角图像的base64编码数据 var imageData = $(jImageId)[0].toDataURL("image/jpeg",qly);
不幸的是，当没有圆角画布显示图像时，角落仍然存在......
问题：有没有一种简单的方法来获取显示在画布上的 base64 图像数据，还是我必须经历痛苦的像素剪切考验？
谢谢！
【问题讨论】：
标签： html image-processing canvas base64 image-clipping
似乎边框半径只是 HTML 的样式，而不是画布内的图像数据，因此您必须将角擦掉才能获得圆形图像。
搜索后我找到了theseposts，它教会了我如何擦除形状而不是重新排列，所以我们开始吧：
JSFiddle（虽然由于 COR 限制，最终导出部分无法使用）
ctx.drawImage(src,0,0);
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(10,0);
ctx.arcTo(0,0,0,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(90,0);
ctx.arcTo(100,0,100,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(0,90);
ctx.arcTo(0,100,10,100,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(90,100);
ctx.arcTo(100,100,100,90,10);
ctx.closePath();
ctx.fill();
ctx.restore();
des.src=can.toDataURL("image/png");
基于您已经知道圆角半径的事实。
这是我本地主机上的结果截图：
【讨论】：