Блог

Я использую https://www.pdftron.com / для цифровой подписи PDF-документов вместе с Angular v10. У них действительно хорошая документация, поэтому мне удалось сделать почти все, что я хотел. Единственное, что меня беспокоит, это то, что я не могу экспортировать подпись в виде изображения при использовании метода рисования. Вот инструмент подписи, который предлагает библиотека https://www.pdftron.com/documentation/web/guides/signature-tool /. Для других доступных методов экспорт подписи в виде изображения действительно прост, поскольку annot поле свойства annotation has image .

Метод рисования возвращает произвольную аннотацию ( 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())
  });
});
  

Пожалуйста, дайте мне знать, работает ли это для вас

Вы можете фильтровать аннотации подписи следующим образом

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

После того, как вы получите подпись, которую хотите нарисовать, вы можете создать временный элемент canvas и использовать метод «draw», чтобы нарисовать подпись на нем.
https://www.pdftron.com/api/web/Annotations .Произвольная аннотация.html#нарисовать __якорь

После этого вы можете использовать «toDataURL» (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL ) для извлечения изображения из холстов.

Пожалуйста, дайте мне знать, помогло ли вышеуказанное или вам нужна дополнительная информация.

С наилучшими пожеланиями