关于在Mozilla PDF.js中集成自定义预置图章功能的技术咨询

1. 添加自定义预置图章图片 #

• 准备图章资源：将制作好的「Approve」「Done」「Rejected」透明背景图（推荐PNG格式）放到项目静态资源目录，比如 viewer/web/images/stamps/ 下，确保路径可直接访问。
• 定义预置图章配置：在PDF.js核心逻辑文件（如 viewer.js）中新增配置数组，统一管理预置图章的基础信息：

// 预置图章配置，可按需调整路径、尺寸
const STAMP_PRESETS = [
  { id: 'approve', label: 'Approve', src: 'images/stamps/approve.png', width: 120, height: 60 },
  { id: 'done', label: 'Done', src: 'images/stamps/done.png', width: 100, height: 50 },
  { id: 'rejected', label: 'Rejected', src: 'images/stamps/rejected.png', width: 120, height: 60 }
];

2. 修改代码支持选择并应用预置图章 #

需要调整前端页面和核心逻辑两部分：

（1）扩展工具栏，添加预置图章按钮 #

在 viewer.html 的图章工具区域（现有「添加图章」按钮附近），新增三个预置图章触发按钮：

<!-- 插入到工具栏合适位置 -->
<div class="toolbarButtonGroup">
  <button id="stamp-approve" class="toolbarButton" title="添加Approve图章">Approve</button>
  <button id="stamp-done" class="toolbarButton" title="添加Done图章">Done</button>
  <button id="stamp-rejected" class="toolbarButton" title="添加Rejected图章">Rejected</button>
</div>

（2）绑定按钮事件，实现图章添加逻辑 #

在 viewer.js 中给新增按钮绑定点击事件，调用PDF.js注释API完成图章添加：

// 初始化预置图章按钮事件
function initPresetStamps() {
  const viewer = window.PDFViewerApplication;
  if (!viewer || !viewer.annotationManager) return;

  STAMP_PRESETS.forEach(preset => {
    const btn = document.getElementById(`stamp-${preset.id}`);
    if (!btn) return;

    btn.addEventListener('click', async () => {
      // 加载预置图章图片
      const img = new Image();
      img.src = preset.src;
      await new Promise(resolve => img.onload = resolve);

      // 获取当前页面信息（示例用页面中心位置，可改为鼠标点击坐标）
      const pageIndex = viewer.page - 1;
      const page = await viewer.pdfDocument.getPage(pageIndex + 1);
      const viewport = page.getViewport({ scale: viewer.currentScale });
      // 计算图章在页面上的居中位置
      const x = viewport.width / 2 - preset.width / 2;
      const y = viewport.height / 2 - preset.height / 2;
      const rect = [x, y, x + preset.width, y + preset.height];

      // 生成图章注释的外观流
      const appearanceStream = await createStampAppearance(img, preset.width, preset.height, viewer.pdfDocument);
      // 创建图章注释
      const stampAnnotation = new window.PDFJS.Annotation({
        type: 'stamp',
        subtype: 'Stamp',
        pageIndex,
        rect,
        appearance: { normal: { N: appearanceStream } },
        contents: preset.label
      });

      // 添加并渲染图章
      viewer.annotationManager.addAnnotation(stampAnnotation);
      viewer.annotationManager.drawAnnotation(stampAnnotation);
    });
  });
}

// 辅助函数：生成PDF图章的外观流
async function createStampAppearance(img, width, height, pdfDoc) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);
  
  // 将图片转为PNG字节流
  const imgDataUrl = canvas.toDataURL('image/png');
  const imgBytes = window.atob(imgDataUrl.split(',')[1]);
  const uint8Array = new Uint8Array(imgBytes.length);
  for (let i = 0; i < imgBytes.length; i++) {
    uint8Array[i] = imgBytes.charCodeAt(i);
  }

  // 嵌入图片到PDF文档并生成外观流
  const embeddedImage = await pdfDoc.embedPng(uint8Array);
  const content = `q ${width} 0 0 ${height} 0 0 cm /Im0 Do Q`;
  return pdfDoc.createAppearanceStream(content, [embeddedImage]);
}

// 在PDF加载完成后初始化预置图章
window.PDFViewerApplication.eventBus.on('documentloaded', initPresetStamps);

（3）适配现有图章选择面板（可选） #

如果项目使用了图章选择下拉面板，可将预置图章选项加入面板列表，逻辑与按钮事件一致，用户选择后触发图章添加。

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