如何在JavaScript中识别PDF底部空白矩形区域以插入图片？

要实现PDF末尾底部特定尺寸空白区域的检测，我们可以借助前端常用的PDF处理库pdfjs-dist来解析PDF内容，通过检查目标区域内是否存在文本、图形或图像元素来判断是否为空白。以下是具体实现步骤和代码示例：

1. 依赖准备 #

首先引入pdfjs-dist库，你可以通过npm安装：

npm install pdfjs-dist

或者直接通过CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

2. 核心实现逻辑 #

1. 加载PDF文档并定位到最后一页；
2. 根据页面尺寸计算目标空白区域的坐标（注意PDF坐标系以左下角为原点）；
3. 遍历页面的文本、图形、图像元素，检查是否与目标区域存在重叠；
4. 若没有任何元素重叠，则判定该区域为空白。

3. 完整代码示例 #

import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 配置PDF Worker
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

async function checkBottomBlankArea(pdfUrl, targetWidth, targetHeight, margin = 20) {
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  const lastPage = await pdfDoc.getPage(pdfDoc.numPages);
  
  // 获取页面原始尺寸（不缩放）
  const viewport = lastPage.getViewport({ scale: 1 });
  const pageWidth = viewport.width;
  const pageHeight = viewport.height;
  
  // 计算目标空白区域的坐标：居中，距离底部margin，尺寸为targetWidth×targetHeight
  const targetX = (pageWidth - targetWidth) / 2;
  const targetY = margin;
  const targetRight = targetX + targetWidth;
  const targetTop = targetY + targetHeight;

  let hasOverlap = false;

  // 检查文本元素
  const textContent = await lastPage.getTextContent();
  for (const textItem of textContent.items) {
    const textX = textItem.transform[4];
    const textY = textItem.transform[5];
    const textEndX = textX + textItem.width;
    const textEndY = textY + (textItem.height || 16); // 默认字体高度

    // 判断文本是否与目标区域重叠
    if (textX < targetRight && textEndX > targetX && textY < targetTop && textEndY > targetY) {
      hasOverlap = true;
      break;
    }
  }

  if (!hasOverlap) {
    // 检查图形与图像元素
    const operatorList = await lastPage.getOperatorList();
    for (let i = 0; i < operatorList.fnArray.length; i++) {
      const op = operatorList.fnArray[i];
      const args = operatorList.argsArray[i];

      // 处理矩形绘制命令（re）
      if (op === pdfjsLib.OPS.rect) {
        const [x, y, w, h] = args;
        const rectRight = x + w;
        const rectTop = y + h;

        if (x < targetRight && rectRight > targetX && y < targetTop && rectTop > targetY) {
          hasOverlap = true;
          break;
        }
      }

      // 处理图像绘制命令（Do）
      if (op === pdfjsLib.OPS.invokeNamedXObject) {
        const xObjId = args[0];
        const xObj = await lastPage.objs.get(xObjId);
        if (xObj?.type === 'XObject' && xObj.subtype === 'Image') {
          // 简化处理：获取当前变换矩阵下的图像位置（复杂场景需跟踪完整图形状态）
          const { transform } = lastPage.getViewport({ scale: 1 });
          const imgX = transform[4];
          const imgY = transform[5];
          const imgEndX = imgX + xObj.width * transform[0];
          const imgEndY = imgY + xObj.height * transform[3];

          if (imgX < targetRight && imgEndX > targetX && imgY < targetTop && imgEndY > targetY) {
            hasOverlap = true;
            break;
          }
        }
      }
    }
  }

  return !hasOverlap;
}

// 使用示例
const pdfPath = './your-document.pdf';
const logoWidth = 220;
const logoHeight = 80;

checkBottomBlankArea(pdfPath, logoWidth, logoHeight)
  .then(isBlank => {
    if (isBlank) {
      console.log('底部目标区域无内容，可以插入Logo');
      // 此处执行插入图片的逻辑（可结合pdf-lib等库实现PDF修改）
    } else {
      console.log('底部目标区域已有内容，无法插入');
    }
  })
  .catch(err => console.error('检测出错:', err));

4. 关键注意事项 #

• PDF坐标系差异：PDF以左下角为原点（x向右，y向上），与网页的左上角原点坐标系不同，计算区域时需注意转换；
• 图形状态跟踪：示例中简化了变换矩阵的处理，若PDF存在旋转、缩放等复杂变换，需完整跟踪图形状态的cm命令来准确计算元素位置；
• 元素覆盖范围：除文本、矩形、图像外，PDF还包含路径、渐变等元素，若需求严格，需补充对应运算符的处理逻辑；
• 性能优化：遍历元素时一旦发现重叠即可终止检测，避免不必要的计算，提升处理速度。

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