图片裁剪之如何实现圆角矩形?

圆角矩形图片生成指南

如何操作

1. 指定圆角大小：

   • 使用rounded-corners操作，通过参数r指定圆角半径，取值范围为[1, 4096]。确保生成的最大圆角半径不超过原图最小边的一半。

2. 透明与非透明背景处理：

   • 对于支持透明通道的格式（如PNG、WebP、BMP），圆角外区域将以透明填充。
   • 若图片最终保存为JPG格式，非圆形区域将以白色填充。因此，推荐使用PNG格式以保留透明效果。

3. 构造图片处理URL：

   • 直接生成圆角矩形：在图片URL后添加处理参数，例如圆角半径为30像素的JPG图片处理URL为：http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/rounded-corners,r_30
   • 先裁剪再圆角：若需先自定义裁剪图片尺寸，再进行圆角处理并转换格式，如将图片裁剪为100x100像素，然后设置圆角半径为10像素并保存为PNG格式，处理URL示例为：http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/crop,w_100,h_100/rounded-corners,r_10/format,png

注意事项

• 半径限制：指定的圆角半径不会超过原图最大内切圆的半径。
• 格式选择：考虑透明度需求，合理选择输出图片格式。
• 操作顺序：当有多个处理步骤时，按照参数在URL中的顺序执行。

通过上述步骤和注意事项，您可以灵活地将图片处理成指定圆角大小的圆角矩形，并根据需要调整图片的透明度和格式。