如何在Node.js中使用pdfmake实现圆形图片效果

我正在Node.js环境中使用pdfmake生成PDF文件，相关代码如下：

const imageBuffer = await imageToBase64('image path'); //image from azure blob storage
const pdfData = {
    content: [
        {
          image: `data:image/jpeg;base64,${imageBuffer}`,
          width: 100,
          height: 100,
        }
    ]
};

----rest of the pdf logic goes here----

目前生成的PDF中图片为默认矩形，我知晓pdfmake的样式中没有border-radius属性，但必须坚持使用pdfmake，因此希望将imageBuffer转换为圆形图片，请问是否有合适的npm包或其他实现方式？

解决方案 #

由于pdfmake本身不支持图片圆角，你可以在传入pdfmake之前，用Node.js图像处理库将图片预转为圆形，以下是两种可行方案：

方案1：使用jimp库（轻量易用） #

1. 安装依赖

npm install jimp

2. 编写圆形转换函数

const Jimp = require('jimp');

async function convertToCircle(imageBuffer) {
  const targetSize = 100; // 和pdfmake中设置的尺寸一致
  const image = await Jimp.read(imageBuffer);
  
  // 先将图片缩转为正方形
  image.resize(targetSize, targetSize);
  
  // 创建圆形遮罩：白色圆形，透明背景
  const mask = new Jimp(targetSize, targetSize, 0x00000000);
  const bitmap = mask.bitmap;
  
  // 遍历像素，绘制圆形区域
  for (let x = 0; x < targetSize; x++) {
    for (let y = 0; y < targetSize; y++) {
      const distance = Math.sqrt(Math.pow(x - targetSize/2, 2) + Math.pow(y - targetSize/2, 2));
      if (distance <= targetSize/2) {
        const pixelIndex = (x + y * targetSize) * 4;
        bitmap.data[pixelIndex] = 255;     // R
        bitmap.data[pixelIndex + 1] = 255; // G
        bitmap.data[pixelIndex + 2] = 255; // B
        bitmap.data[pixelIndex + 3] = 255; // A（不透明）
      }
    }
  }
  
  // 给原图应用遮罩，导出为base64格式
  image.mask(mask);
  return await image.getBase64Async(Jimp.MIME_JPEG);
}

3. 在pdfmake中使用处理后的图片

const originalBuffer = await imageToBase64('image path');
const circularImage = await convertToCircle(originalBuffer);

const pdfData = {
    content: [
        {
          image: circularImage,
          width: 100,
          height: 100,
        }
    ]
};

方案2：使用sharp库（高性能，适合批量处理） #

sharp基于libvips，处理速度更快，适合大量图片场景：

1. 安装依赖

npm install sharp

2. 编写转换函数

const sharp = require('sharp');

async function convertToCircle(imageBuffer) {
  const targetSize = 100;
  // 生成圆形遮罩的SVG
  const maskSvg = Buffer.from(`
    <svg width="${targetSize}" height="${targetSize}">
      <circle cx="${targetSize/2}" cy="${targetSize/2}" r="${targetSize/2}" fill="white"/>
    </svg>
  `);
  
  // 调整图片尺寸，应用遮罩（dest-in模式保留遮罩内的像素）
  const processedBuffer = await sharp(imageBuffer)
    .resize(targetSize, targetSize)
    .composite([{
      input: maskSvg,
      blend: 'dest-in'
    }])
    .jpeg()
    .toBuffer();
  
  // 转为pdfmake支持的base64格式
  return `data:image/jpeg;base64,${processedBuffer.toString('base64')}`;
}

3. 集成到pdfmake的方式和方案1一致。

内容的提问来源于stack exchange，提问作者Code The World