如何修復angular2-signaturePad中的“無法讀取未定義的屬性'toDataURL'”

Question

我正在構建一個使用 Angular 7 的項目。我目前正在嘗試實現簽名並將簽名圖像保存在數據庫中。 所以我選擇“angular2-signaturepad”包來實現簽名。在繪制完成之前它工作正常。 簽名繪制完成后，我想保存圖像。 但它在繪制完成后顯示錯誤“無法讀取未定義的屬性'toDataURL'”。

在 html 文件中

<signature-pad [options]='signaturePadOptions' (onBeginEvent)="drawBegin()" (onEndEvent)="drawComplete()"></signature-pad>

在 ts 文件中

import { SignaturePad } from "angular2-signaturepad/signature-pad";

在 oninit 里面

  @ViewChild('SignaturePad') signaturePad: SignaturePad;
  public SignaturePadOptions = {
    'minWidth':2,
    'penColor':'rgb(66,133,244)',
    'backgroundColor':'rgb(255,255,255)',
    'canvasWidth':450,
    'canvasHeight':150,
  };
  public drawBegin(): void {
    console.log('Begin Drawing');
  }

  public drawComplete(): void {
    let signature = this.signaturePad.toDataURL('image/jpeg', 0.5);
    console.log(signature);
  }
}```



I expect the output should be the base url image name while console the result. But it is showing error "ERROR TypeError: Cannot read property 'toDataURL' of undefined".

Answer 1

我在 ionic 4 中遇到了這樣的問題，因為 Ionic 在視圖完成渲染之前執行構造函數。 看到這可能有幫助https://github.com/szimek/signature_pad/issues/412

Answer 2

在znotdead對另一個問題的評論中發現了這一點： Angular 有一個簽名板可以將其保存為圖像？

將導入語句從：

   import { SignaturePad } from "angular2-signaturepad/signature-pad";

到

   import { SignaturePad } from 'angular2-signaturepad';

Answer 3

嘗試添加這個

 ionViewDidEnter() {
   var canvas =document.querySelector('canvas');
   this.signaturePad = new SignaturePad(canvas);
  }

Answer 4

ngAfterViewInit() {
    setTimeout(() => {
      console.log('signature pad', this.signaturePad);
    }, 1000);
  }

Answer 5

它對我來說是這樣的：

constructor(private elRef: ElementRef) {
}
ionViewDidEnter() {
    const canvas = this.elRef.nativeElement.querySelector('canvas');
    this.signaturePad = new SignaturePad(canvas);
}