如何将PDF以矢量数据加载至fabric.js画布而非栅格化？

你不需要把Fabric.js画布直接传给pdf.js，正确的思路是用pdf.js解析PDF的路径命令，再将这些命令转换为Fabric.js支持的矢量路径对象，完全避免栅格化。以下是具体实现步骤和代码：

核心思路 #

1. 用pdf.js读取PDF页面的操作指令流，过滤出moveto、lineto、curveto等路径相关指令
2. 将PDF的坐标系统转换为Fabric.js的坐标系统（PDF原点在左下角，Fabric.js在左上角，需反转Y轴）
3. 把提取到的路径指令转换为Fabric.js的Path字符串格式，再创建矢量路径对象添加到画布

实现代码 #

// 初始化pdf.js（确保已引入pdf.js库）
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

// 从PDF提取路径数据
async function extractPDFPaths(pdfUrl) {
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  const page = await pdfDoc.getPage(1); // 这里以第一页为例，可循环处理多页
  const operatorList = await page.getOperatorList();
  const pageHeight = page.view[3]; // 获取页面高度，用于坐标转换
  const pathList = [];
  let currentPath = '';

  // 遍历所有PDF操作指令
  for (let i = 0; i < operatorList.fnArray.length; i++) {
    const op = operatorList.fnArray[i];
    const args = operatorList.argsArray[i];

    // 只处理需要的路径命令
    switch (op) {
      case 'm': // moveto
        const [mx, my] = args;
        currentPath += `M ${mx} ${pageHeight - my} `;
        break;
      case 'l': // lineto
        const [lx, ly] = args;
        currentPath += `L ${lx} ${pageHeight - ly} `;
        break;
      case 'c': // curveto
        const [c1x, c1y, c2x, c2y, x, y] = args;
        currentPath += `C ${c1x} ${pageHeight - c1y} ${c2x} ${pageHeight - c2y} ${x} ${pageHeight - y} `;
        break;
      case 'h': // closepath
        currentPath += 'Z ';
        // 闭合路径后存入列表
        if (currentPath.trim()) {
          pathList.push(currentPath.trim());
          currentPath = '';
        }
        break;
      // 可选：按需添加其他路径命令的处理（如S/s平滑曲线、v/V竖线等）
    }
  }

  // 处理未闭合的剩余路径
  if (currentPath.trim()) {
    pathList.push(currentPath.trim());
  }

  return pathList;
}

// 将路径添加到Fabric.js画布
async function loadPathsToFabric(pdfUrl, canvas) {
  const paths = await extractPDFPaths(pdfUrl);
  paths.forEach(pathStr => {
    const fabricPath = new fabric.Path(pathStr, {
      fill: 'transparent',
      stroke: '#000',
      strokeWidth: 1
      // 可自定义填充、描边、线宽等样式
    });
    canvas.add(fabricPath);
  });
  canvas.renderAll();
}

// 使用示例
const canvas = new fabric.Canvas('your-canvas-id');
loadPathsToFabric('target.pdf', canvas);

关键说明 #

• 全程基于矢量数据处理，完全保留moveto/lineto/curveto等原始路径命令，没有栅格化损失
• 自动忽略PDF中的文本、图像等你不需要的元素，只提取路径指令
• 坐标转换是核心：通过页面高度反转Y轴，确保路径在Fabric.js画布中的位置正确

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