The function will look likeĪs you can see, it’s showing an error because we are not returning the Observable, so let’s add the functionality to convert the base64 to an image We will create a separate method in the file called convertToImage() that will take base64 as a parameter and this will return an observable of File type. Now, open the image-conversion-service.ts file inside the services folder and make the following changes:

This will create an ImageConversionService inside the services folder.Īlso Read – Angular CLI Project Setup Update the ImageConversionService – ng generate service services/image conversion To generate the image conversion service in the service folder, execute the following command Now we’ll create a new service for Image compression to keep the code of image conversion in one place so that we won’t have to write the code again and again. MinWidth: 2, // used for pen width after writing Now, in the file add this signaturePad: SignaturePad Now, add go to AppModule.ts file and add SignaturePadModule in imports To install the angular2-signature pad use this command In this blog, we will use angular2-signature pad dependency for the signature pad but the signature pad returns the base64 URL for the image if we wanted the actual image of the signature then what should we do? Install Digital Signature Pad In Angular After saving the document the signature gets stored in a base64 type image. At the end of the document, there will be a box that allows the user to sign the document on a web application. SignaturePad is used to sign a document digitally using a stylus or mouse cursor pointer. Which stylesheet format would you like to use? CSS.Would you like to add Angular routing? Yes.Execute the following command to create the project. Use the Angular CLI tool to create an Angular project.

Angular 10 signature pad