Drag and drop a signature image on top of the file

[gentios]

Hi, thank you for the work and for this great library

I am interested to use the library for drag and drop a signature image on top of the pdf and get its (image) coordinates such as: lx rx, ly, ry so later on I can send it to the backend for digitally signing it.

I have achieved this result using PDF.js and canvas however I wanted to whether its doable also with this library and get those extra features that is offering.

Thank you in advance

[stephanrauh]

Sounds interesting. How did you implement this with pdf.js?

I'm pretty sure the same approach works with ngx-extended-pdf-viewer, too. Basically, it's simply an add-on to pdf.js.

[gentios]

Thank you for your fast reply.

I have achieved the drag and drop feature with https://interactjs.io/ however I cannot do the same with ngx-extended-pdf-viewer too

I am attaching a screenshot of trying to do the same.

[stephanrauh]

That's strange. But I'm afraid I don't really understand how interact.js works. I suspect it doesn't recognize you're dragging something into the drop zone. I've tried to debug the library, but that's not that easy.

Maybe interact.js isn't compatible to the build-in drag-and-drop feature of pdf.js (which is active by default in ngx-extended-pdf-viewer).

[gentios]

It seems so that it cannot find the drop zone.

Here I created a stackblitz, unfortunately stackblitz is not able to run for some reason ngx-extended-pdf-viewer but it works to show the idea behind it and also for a reference of others.

There I am showing on how I do a drag-and-drop on a pdf.js custom component I have created, and I try to do the same with ngx-extended-pdf-viewer

https://stackblitz.com/edit/angular-ivy-ekxpyh?file=src/app/app.component.html

[stephanrauh]

Embedding the entire PDF viewer in the drop zone is a clever solution! That's the difference to what I tried yesterday.

To my surprise, it only takes a few tiny modification to make your demo work. Find the modified StackBlitz demo at https://github.com/stephanrauh/pdfviewer-drag-and-drop.

Enjoy! Stephan

[stephanrauh]

Basically, I only moved the signature div a line below the ngx-extended-pdf-viewer tag in the HTML source code. For some reason, interactivejs pushes the div below the PDF viewer when you start dragging. I just don't understand why that happens. I suppose you can also fix this by setting a high z-index.

[gentios]

Wow perfect thank you for your support, I appreciate it.

One last thing that I needed to clarify now is how to access the canvas element that is being created if I need to access the context or its width, height.

[stephanrauh]

The DOM tree of the PDF viewer looks like so:

I assume you know which page you're currently displaying. If so, you can get the canvas using a CSS selector:

document.querySelector('[data-page-number]=42  canvas')

I didn't test it, so maybe I didn't jot down the CSS selector correctly, but you get the idea.

[gentios]

CSS selector did the job, much appreciated from you @stephanrauh

[ziaKhan1995]

@gentios Thank you for this Stackblitz example

Can you update a little bit, on how to display all the pages instead of one page?

The @stephanrauh This example using ngx-extended-pdf-viewer is nice which shows all the pages but a little drawback.. the drag-drop signature div does not remain sticky on the position on where it was. it just remains fixed which is not our requirement.

OR

@stephanrauh Can you please make the draggable signature position static on the page where we insert it, when we scroll the pdf the signature should not remain fixed. I mean the signature div should remain fixed to the page instead of the entire pdf.

Thanks in advance

[stephanrauh]

Oh, whow, that's a demo I totally forgot. Yes, you're right, it's a minimalist implementation that doesn't consider scrolling. You can fix this by listening to the scroll position using a MutationObserver. When the PDF viewer scrolls, the signature canvas should scroll in sync.