使用pdfjs-dist将PDF转PNG丢失数据的问题求助

我在应用中使用pdfjs-dist结合NodeCanvasFactory实现PDF转PNG，但转换后生成的图片完全空白，所有内容丢失。代码实现如下：

class NodeCanvasFactory {
  create(w, h) {
    if (!w || !h) {
      throw new Error('invalid canvas size');
    }
    const canvas = Canvas.createCanvas(w, h);
    return {
      canvas,
      context: canvas.getContext('2d'),
    };
  }
}
static async toPNG(document, pageNum)
{
    return new Promise((resolve, reject) => {
      document.getPage(pageNum).then((page) => {
        const viewport = page.getViewport({
          scale: 1.0,
        });
        const factory = new NodeCanvasFactory();
        const data = factory.create(viewport.width, viewport.height);
        page.render({
          canvasFactory: factory,
          canvasContext: data.context,
          viewport,
        }).promise.then(() => resolve({
          page: pageNum,
          width: viewport.width,
          height: viewport.height,
          buffer: data.canvas.toBuffer(),
        })).catch(e => reject(e));
      }).catch(e => reject(e));
    });
  }

输入输出情况 #

• 输入PDF的可视化内容：
• 转换后得到的空白PNG：

修复方案 #

1. 移除冲突的canvasContext配置 #

page.render()方法中，当传入canvasFactory时，不需要手动指定canvasContext——pdfjs会通过工厂自动创建并使用画布上下文，手动传入会导致渲染目标混乱，无法正确绘制内容。

2. 完善NodeCanvasFactory的实例管理 #

原工厂没有保存创建的画布实例，需要在类中添加属性记录，方便后续获取渲染后的画布：

class NodeCanvasFactory {
  constructor() {
    this.canvas = null;
  }
  create(w, h) {
    if (!w || !h) {
      throw new Error('invalid canvas size');
    }
    this.canvas = Canvas.createCanvas(w, h);
    return {
      canvas: this.canvas,
      context: this.canvas.getContext('2d'),
    };
  }
}

3. 简化toPNG方法逻辑 #

改用async/await替代嵌套Promise写法，避免回调嵌套带来的错误：

static async toPNG(document, pageNum) {
  const page = await document.getPage(pageNum);
  const viewport = page.getViewport({ scale: 1.0 });
  const factory = new NodeCanvasFactory();
  
  await page.render({
    canvasFactory: factory,
    viewport,
  }).promise;

  return {
    page: pageNum,
    width: viewport.width,
    height: viewport.height,
    buffer: factory.canvas.toBuffer(),
  };
}

4. 检查依赖兼容性 #

确保pdfjs-dist（建议3.x+）和canvas库版本匹配当前Node.js环境，若有依赖问题，执行npm rebuild canvas重新编译画布依赖。

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