Cannot read property 'toDataURL' of undefined SignaturePad

Ionic Framework Ionic Angular
1

I don’t know what I am doing wrong but I can’t figure out what’s wrong.

I am trying to get a basic64 img but the signaturepad is undefined lol. Why? I think I am doing everything right. I get the error

Cannot read property 'toDataURL' of undefined

The signature pad appears but when I try to get the image it’s undefined…

Here’s my code:

TS

`
import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signature-pad',
  templateUrl: './signature-pad.page.html',
  styleUrls: ['./signature-pad.page.scss'],
})
export class SignaturePadPage {

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signature: string = '';
  isDrawing = false;
  width: any;
  height: any;

  private signaturePadOptions: object = {
    minWidth: 2,
    canvasHeight: window.innerHeight / 3,
    canvasWidth: window.innerWidth / 1.2,
    backgroundColor: '#ffffff',
    penColor: '#000000',
  };



  constructor(platform: Platform, private router: Router) {
    platform.ready().then((readySource) => {
      this.width = platform.width();
      this.height = platform.height();
    });
  }


  canvasResize() {
    const canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 1);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeigth', canvas.offsetHeight);
  }


  drawComplete() {
    this.isDrawing = false;
  }

  drawStart() {
    this.isDrawing = true;
  }

  goToPage() {
    var sig_object: any = {'desc': history.state.data.desc_sigpad,
                            'signaturepad': this.signature};
    this.router.navigate(['/pg'], { state: { data: { sigpad: sig_object}}});

  }

  savePad() {

    this.signature = this.signaturePad.toDataURL();


    this.goToPage();

    this.signaturePad.clear();
  }
  clearPad() {
    this.signaturePad.clear();
  }
}

HTML

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start" defaultHref="/pg">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title style="text-align: center">Signature</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="margin-top: 20%; padding: 0">
    <ion-grid lines="none" style="margin-top: 50px">
      <ion-row [ngClass]="{'drawing-active': isDrawing}">
        <ion-col></ion-col>
        <ion-col style="border: 1px solid #000000; padding: 5px">
          <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
      <br>
      <ion-row>
        <ion-col></ion-col>
        <ion-col>
          <ion-button size="large" color="danger" expand="full" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col>
          <ion-button size="large" style="color: secondary" expand="full" (click)="savePad()">Save</ion-button>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>

I would be very very thankful. Please help me.

Thank you

2

I had the same problem

change the following in the HTML file
<signature-pad [options] = "signaturePadOptions" (onBeginEvent) = "drawStart ()" (onEndEvent) = "drawComplete ()"> </signature-pad>
in
<signature-pad #signatureCanvas [options] = "signaturePadOptions" id = "signatureCanvas" (onBeginEvent) = "drawStart ()" (onEndEvent) = "drawComplete ()"> </signature-pad>

and replace the following in the TS file
@ViewChild (SignaturePad) signaturePad: SignaturePad;
in
@ViewChild ('signatureCanvas', {static: true}) signaturePad: SignaturePad;

in the canvasResize () function I set the height and width directly above the object from
this.signaturePad.set ('canvasWidth', canvas.offsetWidth);
in
this.signaturePad.set ('canvasWidth', this.signaturePadOptions.canvasWidth);
since he hadn’t adopted the styles.

2 Likes
3

Thank you much. You have helped me! :star_struck: