Send signature from signature pad Ionic


#1

I want to send my signature in an email but I don’t manage to do it

Here’s my code :

import { Component, ViewChild } from '@angular/core';
import { NavController} from 'ionic-angular';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { EmailComposer } from '@ionic-native/email-composer';

@Component({
  selector: 'page-envoie',
  templateUrl: 'envoie.html',
  providers: [SignaturePad, EmailComposer]
})
export class EnvoiePage {

  @ViewChild(SignaturePad) public signaturePad: SignaturePad;

  public signatureImage : string;
  public signaturePadOptions: Object = {
        'minWidth': 2,
        'canvasWidth': 340,
        'canvasHeight': 200 };

        public Cancel: string;

  constructor(public navCtrl: NavController, private emailComposer: EmailComposer){

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

    this.Cancel = this.signatureImage;

  }

   drawComplete() {

    this.signatureImage = this.signaturePad.toDataURL();
    this.emailComposer.open({
      to:      'lol@me.com',
      attachments: [this.signatureImage],
      subject: 'Avis de passage',
      body:    'test',
      isHtml: true
    });

  }

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

}

Can you help me? I’m lost, when I press the button, the email is opened there is my text but not the image

It’s the plugin signature pad and emailcomposer


#2

Where does your code go wrong? Do you even get the signature image? Is the variable set when you give it to emailComposter.open?


#3

I don’t know, my variable is :

data:image/png;base64,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

I have followed a tuto, and I manage to duplicate the signature in another signature pad, so my “ToDataUrl” is working fine


#4

Extract the object out of this call and call console.log on it before you put it into open - if this looks good you know it is “just” an emailComposer problem.

Look at the docs of emailcomposer again, I think there was a way to check if it is available on your device.


#5

I need to call console.log on all the emailComposer.open ?

I just watched the doc and isAvailable is to check if there is a configured email account… So I don’t think it comes from here.

But on the emailComposer Github I saw this attachement : base64:icon.png//iVBORw0KGgoAAAANSUhEUgAA

Mine begin with data:image/png;base64,ivBORw0....


#6

You call it on the object, to see if the object looks good and has the correct data.


#7

Here is my object :


All is good, but it still start by “data:image…” Is it because of this?


#8

Tried with the same name, base64:icon.png//fegdfaez... but nothing


#9

Ok I found this on a forum

"We tested base64 files on android 5 and 4.1 and it worked. You just have to take care of files with the same name. Base64, Resource and Asset attachments are stored in the same folder now, so identically named files effect errors.
This issue will be fixed with the next major-release.

Take a look at the examplebranch for more information about how to attach files.

Please tell us whether that solved your problem or not.

Greatings Philipp"

I changed the name of the file and now it works… (And i’m gone to emailComposer 0.8.3)


#10

@Poseyyy… have you display your image on signature-pad ??


#11

I don’t understand your question


#12

i am displaying one image on signature-pad through camera and am drawing on it …after drawing i cancel the drawing on image . but not able to perform undo() operation.on image. I need solution for undo () operation in typescript…in ionic 3


#13

In order to clear your snignature pad it’s :

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

Or am I wrong and you want only undo the last line created?


#14

yes,I want only undo function …cancel is working for me


#15

I try using pop() operation but it undo the data of signauture-pad and not a data of image of signature-pad …that’s problem … i can share my code to you …can you give me your email id ??


#16

@umeshionic1234 - what does this have to do with the initial topic you hijacked for your question? Usually one creates a new topic and describes one’s problem instead of just posting below old questions that are only slightly related.

Also stop asking all the people responding to your questions for their email. This is a public forum with public topics for all to benefit from asking and answering.