使用Sharp实现PNG到SVG圆形蒙版的缩放叠加

看起来你已经走对了方向，SVG圆形和Sharp的组合完全能搞定这个需求。我帮你把代码补全，顺便理清楚整个流程：

核心思路 #

我们需要完成三个关键步骤：

• 将你的高分辨率PNG缩放并裁剪成适配485x485正方形的尺寸
• 用你写的SVG圆形作为蒙版，把正方形PNG裁剪成圆形
• （可选）将圆形PNG叠加到你指定的深色圆形背景上（如果需要保留背景色的话）

完整Sharp代码实现 #

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

// 你的SVG圆形蒙版（和你写的一致，刚好覆盖485x485画布）
const circleMaskSvg = `
<svg height="485" width="485">
  <circle cx="242.5" cy="242.5" r="242.5" fill="#ffffff"/>
</svg>
`;

// 处理单张PNG的函数
async function processPng(inputPath, outputPath) {
  try {
    // 1. 读取原PNG，缩放并裁剪为485x485正方形（保持比例，取中心区域）
    const squarePng = await sharp(inputPath)
      .resize(485, 485, {
        fit: sharp.fit.cover, // 缩放至覆盖整个正方形区域
        position: sharp.strategy.center // 取中心裁剪
      })
      .toBuffer();

    // 2. 应用圆形蒙版，把正方形PNG变成圆形
    const circularPng = await sharp(squarePng)
      .composite([{
        input: Buffer.from(circleMaskSvg),
        blend: 'dest-in' // 只保留蒙版白色区域内的图像
      }])
      .png();

    // 3. （可选）叠加到你指定的深色圆形背景上
    const finalImage = await sharp(circularPng)
      .composite([{
        input: Buffer.from(`
          <svg height="485" width="485">
            <circle cx="242.5" cy="242.5" r="242.5" fill="#3a4458"/>
          </svg>
        `),
        blend: 'dest-over' // 把背景放到图像下面
      }])
      .withMetadata({ density: 300 }) // 设置300dpi的元数据
      .toFile(outputPath);

    console.log(`处理完成：${outputPath}`);
  } catch (err) {
    console.error(`处理失败：${err}`);
  }
}

// 批量处理示例（遍历目录下的PNG）
const toConvert = './input-pngs'; // 你的PNG目录
fs.readdir(toConvert, (err, files) => {
  if (err) throw err;
  files.forEach(file => {
    if (path.extname(file).toLowerCase() === '.png') {
      const inputPath = path.join(toConvert, file);
      const outputPath = path.join('./output', `circular-${file}`);
      processPng(inputPath, outputPath);
    }
  });
});

关键细节解释 #

• fit: sharp.fit.cover：保证原PNG缩放后能完全覆盖485x485的正方形，避免留白，然后通过position: center裁剪中心区域，这样图像主体不会被切掉。
• blend: 'dest-in'：这个混合模式是关键——它会保留蒙版（SVG圆形）白色区域内的图像，把圆形外的部分完全透明化。注意SVG里的圆形要填充白色#ffffff，因为蒙版是基于白色区域生效的。
• withMetadata({ density: 300 })：给输出图像添加300dpi的元数据，满足你对分辨率的要求。
• 如果你不需要深色背景，可以跳过第三步的composite直接输出圆形PNG（背景透明）。

测试建议 #

1. 先拿一张PNG测试，确认缩放裁剪的位置是否符合预期，如果主体偏了，可以调整position参数（比如sharp.strategy.entropy会自动找图像最有信息量的区域）。
2. 检查输出图像的属性，确认dpi是300，尺寸是485x485像素。

内容的提问来源于stack exchange，提问作者K20GH