如何使用todataUrl保存圆角图像？

Question

我需要将绘制的图像（从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图像数据，就像它出现在画布上一样，还是我必须经历痛苦的​​像素裁剪折磨？

谢谢你！

Answer 1

看起来边框半径只是HTML的样式，而不是画布内的图像数据，因此您必须擦除角落以获得圆角图像。

搜索结束后，我发现these posts教会了我如何擦除形状而不仅仅是纠结，所以我们走了：

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");

基于您已经知道圆角半径的事实。

以下是我在localhost上的结果截图：