PDFTRON

Question

我正在使用 https://www.pdftron.com/ 与 Angular v10 一起对 pdf 文档进行数字签名。他们有非常好的文档，所以我几乎可以做我想做的一切。唯一困扰我的是在使用绘图方法时我无法将签名导出为图像。这是图书馆提供的签名工具https://www.pdftron.com/documentation/web/guides/signature-tool/。对于其他可用的方法，将签名导出为图像非常简单，因为 annotation 的 annot 字段具有 image 属性.

绘图方法returns FreeHandAnnotation ( https://www.pdftron.com/api/web/Annotations.FreeHandAnnotation.html ) 对象。
甚至可以将其导出为图像吗？

Answer 1

您可以像下面这样过滤签名注释

docViewer.getAnnotationManager().getAnnotationsList().filter(a => a.Subject === "Signature");

获得要绘制的签名后，您可以创建一个临时 canvas 元素并使用“draw”方法将签名绘制到其上。 https://www.pdftron.com/api/web/Annotations.FreeHandAnnotation.html#draw__anchor

之后您可以使用“toDataURL”(https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) 从 canvs 中提取图像。

如果以上内容有帮助或者您需要更多详细信息，请告诉我。

此致

Answer 2

这里是从手绘注释中提取图像的代码示例

WebViewer({
  // sample file I use
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // rest of your configurations
  }, document.getElementById('viewer')
).then(instance => {
  const { annotManager, docViewer, Annotations } = instance;
  docViewer.on('annotationsLoaded', async function() {
    // get an annotation you want to extract
    const freeHandAnnot = annotManager.getAnnotationsList().filter(a => a instanceof Annotations.FreeHandAnnotation)[0];
    const canvas = document.createElement('canvas');
    const pageMatrix = docViewer.getDocument().getPageMatrix(freeHandAnnot.PageNumber)

    canvas.height = freeHandAnnot.Height;
    canvas.width = freeHandAnnot.Width;
    const ctx = canvas.getContext('2d');


    // Since the annotation will be drawing at (X,Y) , use ‘translate’, so it’s start at 0,0 instead
    ctx.translate(-freeHandAnnot.X, -freeHandAnnot.Y);
    freeHandAnnot.draw(ctx, pageMatrix);

    // can also use toBlob()
    console.log(canvas.toDataURL())
  });
});

请告诉我它是否适合你

PDFTRON - 将 FreeHandAnnotation 签名导出为图像

PDFTRON - Export FreeHandAnnotation Signature as image

javascript

angular