PDFTRON-将FreeHandAnnotation签名导出为图像

如何解决PDFTRON-将FreeHandAnnotation签名导出为图像

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

Drawing方法返回FreeHandAnnotation（https://www.pdftron.com/api/web/Annotations.FreeHandAnnotation.html）对象。
甚至可以将其导出为图像吗？

解决方法

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

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())
  });
});

请告诉我它是否适合您

,

您可以过滤签名注释，如下所示

$my-color: #ff0000;

:root{
    --my-color: $my-color;
}

$my-color-darken: darken($my-color,15%); // not working

获得要绘制的签名后，可以创建一个临时画布元素，并使用“ 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中提取图像。

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

最好的问候