generateRoundedImage

为图片添加圆角效果，支持自定义圆角半径和抗锯齿处理。

前置依赖

依赖参数

参数名	类型	说明
deps.sharp	Sharp	Sharp 图像处理函数
deps.Buffer	BufferConstructor	Buffer 构造函数

环境要求

• sharp: 图像处理库，用于应用圆角效果
• Buffer: Node.js 内置的 Buffer 构造函数

npm install sharp

函数签名

function generateRoundedImage(
  image: Buffer,
  deps: GenerateRoundedImageDeps
): Promise<Buffer>

interface GenerateRoundedImageDeps {
  sharp: Sharp
  Buffer: BufferConstructor
}

参数

参数名	类型	必填	说明
image	Buffer	是	输入图像的 Buffer 数据
deps	GenerateRoundedImageDeps	是	依赖注入对象

返回值

类型	说明
Promise<Buffer>	Promise，解析为应用圆角效果后的图像 Buffer

工作原理

1. 使用 sharp 获取原始图像的元数据（宽度、高度）
2. 计算圆角半径：radius = Math.min(width, height) * 0.225（22.5%）
3. 使用 SVG 创建圆角遮罩：
   • 创建一个与图像尺寸相同的 SVG
   • 在 SVG 中绘制圆角矩形（<rect rx="radius" ry="radius"/>）
   • 填充白色，背景透明
4. 将 SVG 转换为 Buffer
5. 使用 sharp 的 composite 功能应用遮罩：
   • 使用 dest-in 混合模式
   • 只保留遮罩内的图像部分
6. 输出为 PNG 格式（保留透明度）
7. 返回处理后的图像 Buffer

使用 SVG 遮罩技术确保圆角边缘平滑，透明度处理正确。圆角半径固定为 22.5%，符合 macOS 图标设计规范。