如何使用PDFTron及WebViewer API加载图片并添加批注？缺相关操作指南

嘿，我刚好折腾过PDFTron处理图片的场景，给你梳理下具体操作步骤——其实PDFTron是完全支持直接处理图片文件的，只是官方文档没单独把这个场景拎出来详细讲而已，核心思路是把图片当作单页PDF来处理，后续的批注操作就和常规PDF完全一致了～

不管是WebViewer还是PDFTron的其他SDK，打开图片的关键是用createDocument方法直接加载图片源（可以是远程URL、本地文件Blob或者Base64字符串），它会自动把图片包装成单页PDF文档。

举个WebViewer的代码示例：

// 先初始化WebViewer
const viewerElement = document.getElementById('viewer');
const instance = new WebViewer({
  path: '/lib', // 这里填你的WebViewer库文件路径
}, viewerElement);

instance.then(async function(instance) {
  const { documentViewer } = instance.Core;
  
  // 加载远程图片
  const imageUrl = 'https://example.com/your-image.png';
  // 或者加载本地文件Blob（比如用户上传的图片）
  // const imageBlob = /* 从input file获取的Blob对象 */;
  
  // 创建图片文档并加载
  const doc = await instance.Core.createDocument(imageUrl, { filename: 'my-image.png' });
  documentViewer.loadDocument(doc);
});

如果是处理用户本地上传的图片，可以配合file input来实现：

// 给文件选择框添加监听
document.getElementById('image-upload').addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile && selectedFile.type.startsWith('image/')) {
    // 用选中的图片文件创建文档
    const doc = await instance.Core.createDocument(selectedFile, { filename: selectedFile.name });
    documentViewer.loadDocument(doc);
  }
});

加载图片后，添加批注的逻辑和处理PDF完全一样，因为图片已经被包装成单页PDF了，所有批注API都能直接复用。

比如给图片添加一个半透明红色的矩形批注：

instance.then(async function(instance) {
  const { documentViewer, annotationManager, Annotations } = instance.Core;
  
  // 等待文档加载完成再添加批注
  documentViewer.addEventListener('documentLoaded', () => {
    // 创建矩形批注实例
    const rectangleAnnot = new Annotations.RectangleAnnotation();
    rectangleAnnot.PageNumber = 1; // 图片是单页，所以页码固定为1
    // 设置批注位置和大小
    rectangleAnnot.X = 150;
    rectangleAnnot.Y = 200;
    rectangleAnnot.Width = 300;
    rectangleAnnot.Height = 200;
    // 设置样式
    rectangleAnnot.FillColor = new Annotations.Color(255, 0, 0, 0.3); // 半透明红色填充
    rectangleAnnot.StrokeColor = new Annotations.Color(255, 0, 0); // 红色边框
    rectangleAnnot.StrokeThickness = 2;
    rectangleAnnot.Author = '批注作者';

    // 添加批注到管理器
    annotationManager.addAnnotation(rectangleAnnot);
    // 刷新视图显示批注
    annotationManager.redrawAnnotation(rectangleAnnot);
  });

  // 加载图片文档
  const imageUrl = 'path/to/your/image.jpg';
  const doc = await instance.Core.createDocument(imageUrl, { filename: 'my-image.jpg' });
  documentViewer.loadDocument(doc);
});

你也可以添加其他类型的批注，比如文本批注、箭头批注，只需要替换对应的Annotation类（比如TextAnnotation、ArrowAnnotation），设置对应的属性即可，和PDF批注的操作完全一致。

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