0

I need to save images drawn (from base64 encoding) into a rounded corner canvas. The canvas is defined using:

<canvas id="thumbnailImage" width="86" height="86" style="border:1px solid #d3d3d3;border-radius:10px;">

The image appears as expected (using ctx.drawImage etc...), with rounded corners. Then I obtain the base64 encoding data of the rounded image using 

        var imageData = $(jImageId)[0].toDataURL("image/jpeg",qly);

Unfortunately, when the image is displayed without a rounded-corner canvas, the corners are still there...

Question: is there a simple way to get the base64 image data, as it appears on the canvas, or do I have to go through the painful pixel clipping ordeal ?

thank you !

4

1 回答 1

1

似乎边框半径只是 HTML 的样式，而不是画布内的图像数据，因此您必须擦除角落才能获得圆形图像。

搜索后，我发现这些 帖子教我如何擦除形状而不是重新排列，所以我们开始吧：

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

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

这是我的本地主机上结果的屏幕截图：

本地主机结果

于 2013-09-06T12:06:12.280 回答