时间戳

首页 > 解决方案 > 如何修复angular2-signaturePad中的“无法读取未定义的属性'toDataURL'”

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

问题描述

我正在构建一个使用 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".

标签： angularnpm

解决方案

在znotdead关于另一个问题的评论中发现了这一点： Angular 有一个签名板可以将其保存到图像中吗？

将导入语句更改为：

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

至

   import { SignaturePad } from 'angular2-signaturepad';

推荐阅读