The image is just to validate the signature and is not really needed, but I was curious about how it looks in an image tag. I also added a second button to submit the form. This means we lock the canvas and write the image data to the input field added as the last element. I added a border to make the pad boundaries visible on the screen. This is the area where the signature gets drawn. The form posts the content to the current URL, which is the same Razor page, but a different HTTP method handler. I created a simple form and placed some elements in it: I added a new razor page called Signature and added it to the menu in the _Layout.cshtml. To play around with it, I created a new ASP.NET Core Razor Pages web using the dotnet CLI: dotnet new razor -n SignaturePad -o SignaturePad Let me show you in a quick way how it works. Using Signature Pad is really easy and works well without any configuration. It is also possible to use a CDN to use the Signature Pad. It is the super awesome Signature Pad written in TypeScript and available as an NPM and Yarn package. Fortunately, we stumbled upon a pretty cool library on GitHub, created by Szymon Nowak from Poland. It was pretty clear that we needed to use the HTML5 canvas element and to capture the pointer movements. The signatures must be created on a web UI, running on an iPad Pro. The signatures then get embedded into a generated PDF document together with the results of the checklist. A technician fills out a checklist online and a responsible person and the technician need to sign the checklist afterward.
In one of our projects, we needed to add the possibility to add signatures to PDF documents.
0 kommentar(er)
