如何在angular 11中使用fabricjs實現角度簽名？

Question

我曾嘗試使用 paperjs 和 angular-signature 庫，但都無濟於事，似乎我找不到解決方法。

但后來我找到了另一個更好的解決方案。 我認為在正確的問題關鍵字下發布答案會很有幫助，因為大多數現有問題對於角度電子簽名解決方案都沒有足夠的幫助。

后來我找到了一個使用fabricjs庫的解決方案，我想在下面發布答案。 如果它有幫助請留下您的評論和投票。 謝謝

Answer 1

要使用此代碼，請確保您已安裝 fabricjs

1. 安裝結構：npm i fabric
2. 安裝類型：npm i @types/fabric

注意：當我編寫這段代碼時，我正在使用 angular v11

祝你好運

 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>

塊引用