Intenté usar paperjs y la biblioteca de firmas angulares, pero todo fue en vano, parece que no pude encontrar el camino.
Pero luego encontré otra solución mejor. Pensé que publicar la respuesta bajo las palabras clave de la pregunta correcta sería útil, ya que la mayoría de las preguntas existentes no son lo suficientemente útiles para la solución de firma electrónica angular.
Más tarde encontré una solución usando la biblioteca fabricjs y me gustaría publicar la respuesta a continuación. Si es útil, amablemente deje su comentario y vote. Gracias
Para usar este código, asegúrese de instalar fabricjs
Nota: en el momento en que escribí este código, estoy usando angular v11
Buena suerte
import { Component, OnInit} from '@angular/core'; import {fabric} from 'fabric'; @Component({ selector: 'app-signature', templateUrl: './signature.component.html', styleUrls: ['./signature.component.scss'], }) export class SignatureComponent implements OnInit { constructor() { } canvas: any ; clearCanvas(){ this.canvas.clear(); console.log(this.canvas.clear()); } image: string = ""; saveCanvas(){ // save the image in the image variable as base64 png image string this.image = this.canvas.toDataURL('png'); // console.log(this.image); } ngOnInit() { this.canvas = new fabric.Canvas('canvas', { isDrawingMode: true }); // color of the canvas this.canvas.freeDrawingBrush.color = '#000'; //size or thickness of the line this.canvas.freeDrawingBrush.width = 5; } } .wrapper { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #edeaea; } .signature-canvas { width: 100%; height: 60%; display: flex; justify-content: center; align-items: center; flex-direction: column; .header { width: 70%; text-align: center; margin-bottom: 30px; border-bottom: 2px solid #fefefe; } .canvas-wrapper { // width: 100%; border-top: 2px solid var(--app-base-color); border-bottom: 2px solid var(--app-base-color); display: flex; justify-content: center; align-items: center; background-color: #fff; } .button-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 20px; padding-right: 50px; } } <div class="wrapper"> <div class="signature-canvas"> <div class="header"> <h1>Write your Signature Below</h1> </div> <div class="canvas-wrapper"> <canvas id="canvas" #canvas width="600px" height="250px"></canvas> </div> <div class="button-wrapper"> <button (click)="clearCanvas()">Clear</button> <button (click) ="saveCanvas()">Save</app-button> </div> <!-- //preview --> <!-- <img [src]="image" alt="" style="border: 2px solid red"> --> </div> </div>Cita en bloque