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

尝试添加此

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

Answer 2

我遇到了离子4的问题，因为离子在视图渲染完成之前执行了构造函数。看到这可能有帮助 https://github.com/szimek/signature_pad/issues/412

Answer 3

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

Answer 4

在znotdead对另一个问题：There is a signature pad for Angular that save it to image?的评论中发现了这一点

从以下位置更改导入语句：

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

到

   import { SignaturePad } from 'angular2-signaturepad';

Answer 5

它对我这样工作：

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

如何修复angular2-signaturePad中的“无法读取未定义的属性'toDataURL'”

5 个答案: