如何用Sharp.js在Node.js中给合成网格图片添圆角并消除黑边

问题原因 #

黑边出现的核心原因有两个：

1. 单张图片在裁剪圆角前未保留Alpha通道，使用dest-in混合模式时，Sharp会将透明区域默认填充为黑色
2. 图片尺寸计算可能产生小数，导致mask SVG与实际图片尺寸不匹配，边缘出现像素偏差

解决方案 #

1. 强制单张图片保留Alpha通道

在单张图片处理流程中添加ensureAlpha()方法，将图片转为RGBA格式，保证圆角外的区域为透明而非黑色：

修改imagePromises中的处理逻辑：

return image.resize(imageWidth, imageHeight, { fit: 'cover' })
  .ensureAlpha() // 新增：强制生成Alpha通道
  .composite([{
    input: mask,
    blend: 'dest-in'
  }]).toBuffer();

2. 修正尺寸计算，避免小数误差

将imageWidth和imageHeight的计算结果取整，确保与mask SVG的尺寸完全匹配：

const imageWidth = Math.floor((productWidth - gapSize * (row - 1) - gapSize * 2) / row);
const imageHeight = Math.floor((productHeight - gapSize * (col - 1) - gapSize * 2) / col);

3. 优化mask SVG的生成

明确指定SVG的尺寸并设置矩形填充色，避免潜在的渲染异常：

const mask = Buffer.from(
  `<svg width="${imageWidth}" height="${imageHeight}"><rect x="0" y="0" width="${imageWidth}" height="${imageHeight}" rx="${borderRadius}" ry="${borderRadius}" fill="#fff" /></svg>`
);

完整修改后的代码 #

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

//dummy image lists, the real data will be fetched by api 
const imageUrls = Array(25).fill("").map((el, i)=> `https://picsum.photos/id/${i}/1280/720`)

//basic setting
const productWidth = 1080
const productHeight = 1080
const row = 5
const col = 5
const gapSize = 10;

// 修正尺寸计算，取整避免小数
const imageWidth = Math.floor((productWidth - gapSize * (row - 1) - gapSize * 2) / row);
const imageHeight = Math.floor((productHeight - gapSize * (col - 1) - gapSize * 2) / col);
const borderRadius = 20;

// 优化mask SVG，指定尺寸和填充色
const mask = Buffer.from(
  `<svg width="${imageWidth}" height="${imageHeight}"><rect x="0" y="0" width="${imageWidth}" height="${imageHeight}" rx="${borderRadius}" ry="${borderRadius}" fill="#fff" /></svg>`
);

const imagePromises = imageUrls.map(async (url) => {
  const response = await axios.get(url, { responseType: 'arraybuffer' });
  const image = sharp(response.data);

  if (image) console.log('downloaded image')

  return image.resize(imageWidth, imageHeight, { fit: 'cover' })
    .ensureAlpha() // 强制保留Alpha通道
    .composite([{
      input: mask,
      blend: 'dest-in'
    }]).toBuffer();
});

async function compositeImages() {
  try {
    const images = await Promise.all(imagePromises)
    //init canvas
    const canvas = sharp({
      create: {
        width: productWidth,
        height: productHeight,
        channels: 4, // RGBA
        background: { r: 255, g: 255, b: 255, alpha: 1 } // white background
      }
    });
    //draw images
    const compositeArr = images.map((buffer, index) => {
      const colValue = index % col
      const rowValue = Math.floor(index / col)
      const x = gapSize + colValue * (imageWidth + gapSize)
      const y = gapSize + rowValue * (imageHeight + gapSize)
      return {
        input: buffer,
        left: x,
        top: y,
        blend: 'atop'
      }
    })
    //download final product
    canvas.composite(compositeArr)
      .png()
      .toBuffer()
      .then((buffer) => {
        fs.writeFileSync('banner.png', buffer);
      });
  } catch (error) {
    console.log(error)
  }
}

compositeImages()

额外说明 #

• ensureAlpha()会自动为图片添加透明通道，彻底解决透明区域被填充为黑色的问题
• 取整尺寸可消除SVG mask与实际图片的像素偏差，避免边缘黑边
• SVG中设置fill="#fff"不影响裁剪效果，但能提升mask渲染的一致性

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