angular - 如何在 angular2-signaturePad 中修复 "Cannot read property ' toDataURL' of undefined"

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";

内部初始化

  @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 在 View 完成渲染之前执行构造函数。看看这个可能有帮助 https://github.com/szimek/signature_pad/issues/412