wulfsolter / angular2-signaturepad

Angular2 Component for szimek / signature_pad

angular2-signaturepad

Angular 2 component for szimek/signature_pad.

No Longer Maintained

<< THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS. I DO NOT USE THIS, I CAN'T HELP YOU WITH YOUR PROBLEMS. >>

Install

npm install angular2-signaturepad --save

Reference Implementation

• Live Demo
• Source

Usage example

API is identical to szimek/signature_pad.

Options are as per szimek/signature_pad with the following additions:

• canvasWidth: width of the canvas (px)
• canvasHeight: height of the canvas (px) The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.

// import into app module

import { SignaturePadModule } from 'angular2-signaturepad';

...

@NgModule({
  declarations: [ ],
  imports: [ SignaturePadModule ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})

// then import for use in a component

import { Component, ViewChild } from 'angular2/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
  template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
})

export class SignaturePadPage{

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() {
    // no-op
  }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }
}

angular2-signaturepad's Issues

Resizing the draw space

I am trying to make the signature pad somewhat responsive in my Angular2 app. I have not been able to. I notice in the README.md

Options are as per szimek/signature_pad with the following additions:

canvasWidth: width of the canvas (px)
canvasHeight: height of the canvas (px) The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.

I have tried to use the examples I find to resize the signature pad but I constantly get errors,

private resizeCanvas() {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

This gets me,

Cannot find name 'canvas'

Then when I try to use canvasWidth I get the same thing? Would you mind showing me how to do this so it will be easy to maintain the correct size of the pad for the user based on the size of their screen?

Angular AoT support?

Please add Ahead of time compile support

Thin Lines

Hi there, thanks for this module!

I've playing around in the signature_app demo and there i can see that the lines of my signature is thinner and has like changin the size of the lines based on the speed you draw

http://szimek.github.io/signature_pad/

You know how can i achieve this behaviour using this wrapper?

thanks

SignaturePad's toDataURL has parameters

hi,
signature_pad's toDataURL has two option parameters imageType and quality

Error: (SystemJS) Unexpected token <

Hi,

i get this error when i implement the model to my angular2-rc4 project.

Can you help me to find out whats wrong?

Uncaught (in promise): Input 'options' defined multiple times in 'SignaturePad'

Trying to incorporate this into an RC5 project with Ionic2. Nothing fancy here, but get this when I try to load the component containing the signature pad.

Uncaught (in promise): Input 'options' defined multiple times in 'SignaturePad'
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:44)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at IDBTransaction.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:68next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

Click elements are not working anymor in a ngFor after adding signaturepad

Hey to all,
first I wanna thank you for this incredible pad (wrapper).
I started coding with angular a week ago and I am currently playing around a bit.
In my researches I found this pad which was exactly what I was looking for.

Now I have the following problem:
I created a small dummy application which allowes a User to maintain some todos.
In the Todo the user can mark is as done or delete it.
All of those todos are in a ngFor loop.
Every thing is working until I add the directive for the signaturepad.
After adding the directive I do not get any Click Events of the inner part of my for loop.
I also do not get any error on the console.
Currently I have no idea what the problem could be.
I hope that someone of you could support me a bit.

My Component:

import { Component, ViewChild, Input } from '@angular/core';
import { Todo } from './todo';
import { TodoDataService } from './todo-data.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SignaturePad }                            from 'angular2-signaturepad/signature-pad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TodoDataService]
})
export class AppComponent {
  @ViewChild(SignaturePad) public signaturePad: SignaturePad;

  newTodo: Todo = new Todo();
  
  constructor(private todoDataService: TodoDataService) {
   
   
  }

 ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }
 
  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }
 
  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }

  toggleTodoComplete(todo) {
    this.todoDataService.toogleTodoComplete(todo);
  }

  addTodo() {
    this.todoDataService.addTodo(this.newTodo);
    this.newTodo = new Todo();
  }

  removeTodo(todo) {
    this.todoDataService.deleteTodoById(todo.id);
  }

  getOpenTodoCount() {
    return this.todoDataService.getOpenTodoCount();
  }

  get todos() {
    return this.todoDataService.getAllTodos();
  }
}

The corresponding html:

<section class="todoapp">
  <header class="header">
    <div class="card">
      <h3 class="card-header">Neues Todo anlegen</h3>
      <h4>Titel</h4>
      <input class="new-todo" placeholder="Title of the Todo" [(ngModel)]="newTodo.title">
      <h4>Beschreibung</h4>
      <textarea  placeholder="Description" [(ngModel)]="newTodo.description"></textarea>
      <h4>Skizze</h4>
      <button class="btn btn-info" (click)="addTodo()">Add</button>
      <signature-pad (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
    </div>
  </header>
  <h2 class="topMargin">Aktuell offene Todos:</h2>
  <section  *ngIf="todos.length > 0">
      <div *ngFor="let todo of todos">
        <div class="card">
          <h3 class="card-header">{{todo.title}}</h3>
          <div class="card-block">
            <p class="card-text">{{todo.description}}</p>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-success" *ngIf="!todo.complete">
                <input  type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">Erledigt
              </label>
              <label class="btn btn-danger">
                <input type="checkbox" (click)="removeTodo(todo)" [checked]="todo.complete">Delete
              </label>
            </div>
          </div>
        </div>
      </div>
  </section>
  <footer class="footer" *ngIf="todos.length > 0">
    <span class="todo-count">Currently are {{getOpenTodoCount()}} of {{todos.length}} {{todos.length == 1 ? 'item' : 'items'}} open</span>
  </footer>
</section>

For debugging issue I also deployed the app HERE

I hope that someone of you has any idea.
Thank you very much for your support!

Fork of szimek/signaturepad

@lathonez Created a new issue due to the other one being locked to commenters. Are you interested in collaborators on this?

The current version of signaturepad has some major flaws that aren't getting fast resolution and I don't think the author is going to change his package to be compatible with this one, so I agree that this is the best route.

I can send you a pull request with my buildable version of signaturepad. It's based off of version 1.5.3 with the new features from 2.1.1 and fixes for two of the major bugs related to SVG exporting. If you're looking for volunteers, I'll be happy to help where I can.

ionic 3 and angular 5 Unable to paint in prod or release mode on device

In browser mode or in normal build the drawing works properly.
But when you build in --prod or --prod --release does not succeed in drawing and gives the following error
vendor.js:1 ERROR ReferenceError: a198254 is not defined
at a._calculateCurveControlPoints (10.js:1)
at a._addPoint (10.js:1)
at a._strokeUpdate (10.js:1)
at a._strokeMoveUpdate (10.js:1)
at HTMLCanvasElement._handleTouchMove (10.js:1)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (vendor.js:1)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at e.invokeTask [as invoke] (polyfills.js:3)

Thank you very much to anyone who helps

Signature is off from finger/pen

Hi guys,

I am using angular2-signaturepad in my Ionic app, and I came across an issue where while I draw a signature, the signature being drawn is just a little bit offset from my finger. Is there any configuration I can do here to make the signature follow right under my finger as I sign? Thanks!

Here's some code I have:

HTML:

<signature-pad class="signature-pad" [options]="signaturePadOptions"></signature-pad>

Typescript:

@ViewChild(SignaturePad) signaturePad: SignaturePad;
private signaturePadOptions: Object;

constructor() {
    this.signaturePadOptions = {
      'minWidth': 2,
      'canvasWidth': 500,
      'canvasHeight': 250
    };
}

Failed to load signature_pad

im trying to use angular 2 signature pad on angular2 quick-start
but go error when loading signature_pad in console log

and i think because of this line

Not respecting dot/line with different colors

Hi,

I decided to use the control a bit deeper with the reference links you mention, setting different penColor, then i found the following.

Steps:
1 - Draw a dot/line => //default color is black
2 - Change the penColor => this.signaturePad.set('penColor', 'rgb(255, 0, 0)'); // red color
3 - Store the control data, clean and set back the data
const data = this.signaturePad.toData();
this.signaturePad.clear();
this.signaturePad.fromData(data);
[Result]
All the dots/line become red, which is the actual color set to the canvas.
The color in the the Array of Point is correct
// Dot 1 - Black
{x: 93.9139404296875, y: 66.08047485351562, time: 1522280288309, color: "rgba(0,0,0,1)"},
// Dot 2 - Red
{x: 118.9139404296875, y: 63.080474853515625, time: 1522280292796, color: "rgb(255, 0, 0)"}

[Expected]
I was expecting the canvas to respect the colors, once i change and add dots and keep changing the color is fine, the issue is when i persist the data, or undo some dots, the all become the last color set.
Any workaround?

Thanks a lot for the awesome project.

Multiple Signature pads in one component,

Hi,

I have a requirement to use multiple signature in single component, If i use @ViewChildren in the component but its not working.And not able to clear the sign in SignaturePad. also its not showing any error in console also.Please help me in fixing this Issue. And we need to add CSS like border, where should I do? In "signaturePadOptions" if I write its not working.
I have read this but didn't get an Idea to use.

https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Backwards Compatible support for signature-pad (no longer maintained project)

Hello, I have created a fork of your project alongside signature_pad (note the difference) and created a backwards compatible method for https://github.com/thread-pond/signature-pad that allows us to draw signatures from this package so as to offer support for older signature for our clients. the changes are very simple, I have put up an npm package and just wanted to inform you, best regards and thanks for the hard work.

https://github.com/LiamDotPro/angular2-signaturepad
https://www.npmjs.com/package/angular2-signaturepad-backwards-compatible

Bug with positions coordinates of the mouse

Hi,
I have this html and code:

<ion-content>
  <ion-row style="height: 85%" class="drawing-active">
    <ion-col>
      <signature-pad ></signature-pad>
    </ion-col>
  </ion-row>
  <ion-row style="height: 15%">
    <ion-col width-50>
      <button ion-button  color="danger" (click)="clearPad()">Clear</button>
    </ion-col>
    <ion-col width-50>
      <button ion-button color="secondary" (click)="savePad()">Save</button>
    </ion-col>
  </ion-row>
</ion-content>

 @ViewChild(SignaturePad) signaturePad: SignaturePad;
ionViewDidEnter() {
        this.signaturePad.set('canvasWidth', (this.content.contentWidth / 2) - 5);
        this.signaturePad.set('canvasHeight', (this.content.contentHeight / 2) * 0.84);
        this.signaturePad.set('minWidth', 1);
        this.signaturePad.set('maxWidth', 1);
        this.signaturePad.set('backgroundColor', '#FFFFFF');
        this.signaturePad.set('penColor', '#000099');
        this.signaturePad.resizeCanvas()
        this.content.resize();
    }

and I have a problem that the mouse position is not on coordinates x 0, y 0, but I somewhere in the content.

Thank you for your help
John

Dependencie version:

"angular2-signaturepad": "2.4.0",

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.5.0
Xcode version: Xcode 8.3 Build version 8E162

Update to latest

szimek/signature_pad is on 2.3.2, we're on 2.2.0

Hello

Hi,

I tried to import the original signature_pad JS to my ionic2 project and make a component out of it, but no success.
Ionic simply can't recognize the module to import in the signature_pad.js

Do you plan to implement this for Angular2 so I can import it into my ionic2 project?

Thanks a lot!

ERROR TypeError: sp is not a constructor

I am using the latest version of angular2_signaturepad - v2.6.1, but I get the following error when trying to use it:

SignatureCaptureQuestionComponent.html:11 ERROR TypeError: sp is not a constructor
    at SignaturePad.ngAfterContentInit (signature-pad.js:21)
    at callProviderLifecycles (core.umd.js:11208)
    at callElementProvidersLifecycles (core.umd.js:11189)
    at callLifecycleHooksChildrenFirst (core.umd.js:11173)
    at checkAndUpdateView (core.umd.js:12273)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callViewAction (core.umd.js:12635)
    at execEmbeddedViewsAction (core.umd.js:12593)
    at checkAndUpdateView (core.umd.js:12271)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callViewAction (core.umd.js:12635)
    at execComponentViewsAction (core.umd.js:12567)
    at checkAndUpdateView (core.umd.js:12276)
    at callWithDebugContext (core.umd.js:13490)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.umd.js:13030)
    at ViewRef_.detectChanges (core.umd.js:10201)
    at core.umd.js:4839
    at Array.forEach (<anonymous>)
    at ApplicationRef_.tick (core.umd.js:4839)
    at core.umd.js:4716
    at ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.umd.js:3922)
    at ZoneDelegate.invoke (zone.js:390)
    at Zone.run (zone.js:141)
    at NgZone.run (core.umd.js:3853)
    at Object.next (core.umd.js:4716)
    at SafeSubscriber.schedulerFn [as _next] (core.umd.js:3667)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
    at EventEmitter.emit (core.umd.js:3653)
    at checkStable (core.umd.js:3887)
    at onLeave (core.umd.js:3966)
    at Object.onInvokeTask (core.umd.js:3916)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at HTMLDivElement.ZoneTask.invoke (

IE 11 issue

Getting SCRIPT5007: Unable to get property 'apply' of undefined or null reference when running in IE 11

signature_pad 1.6.0 has been released, please upgrade

I cant wait to use svg with version 1.6.0 in my ng2 projects.
signature_pad 1.6.0 has been released, i would love an update!

thank you

signature_pad 2.x.x toDataUrl("image/svg+xml")

Please update signature_pad to version 2.x.x or above to support svg export.

signaturePad.toDataUrl("image/svg+xml")

Feature Request: Add resizeCanvas method

I would like to incorporate the resize method from the signature_pad README.

Essentially it would be like this in Typescript:

  resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    const ratio =  Math.max(window.devicePixelRatio || 1, 1);
    this._canvas.width = this._canvas.offsetWidth * ratio;
    this._canvas.height = this._canvas.offsetHeight * ratio;
    this._canvas.getContext("2d").scale(ratio, ratio);
    this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
  }

  // Maybe call the resizeCanvas method here or leave it up to the caller to call it 
  // depending on the usage.
  ngAfterViewInit() {
    this.resizeCanvas();
  }

Either that or perhaps expose a getCanvas method?

I don't mind putting in a PR, I just wanted to know how felt about this first.

svg viewBox does not fit canvas size

Might be this issue belongs to: https://github.com/szimek/signature_pad

Having a canvas 384px x 216px the generated svg ( signaturePad.toDataURL("image/svg+xml") ) has a smaller viewBox:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 120 67.33333333333333" width="120" height="67.33333333333333">
</svg>

So, not the whole signature drawn on the canvas is shown. Please check.
base64 and converted svg files are attached.

signature.txt
signature.svg.txt

Feature request: give public access to elementRef

Hi,

We really need to access to elementRef. We need it to find by elementRef element id when there are multiple pad. We can get access thru @ViewChildren, but we still need to know which one is signed when we iterate it.

Since rc6 you have to remove the line inputs: ['options'],

Since rc6 you have to remove the line "inputs: ['options']," in @component declaration.

slow down ipad and drains battery

I've used this on a web app and onto ipad2 its draining battery and slow dow as the signature form is used.

Is it required to call the ".off()" method before leaving the form page?

Or any other suggestions where i can find the reason of the memory leak?

It does not happen on chrome/android too :-(

SignaturePad on Ionic/Angular does not work correctly

Hello everyone, I have some troubles in using SignaturePad in my application. I don't have any problem when I launch the application in Ubuntu (VirtualBox), but when I launch it on my Surface (where I really need it), I have a problem.

The problem is when I put a canvas in my application with an image in the background with the fonction "fromDataUrl()" :

  ngAfterViewInit() {
    if (this.record.new_signature_base64) {
      this.signaturePad.fromDataURL('data:image/jpeg;base64,' + this.record.new_signature_base64);
    } else {
      this.clear();
    }
  }

<ion-content >
  <ion-badge color="subtle" padding style="width:100%;height:100%;text-align:center;vertical-align: middle;" >
    <ion-badge color="white" padding style="position: relative; top: 50%; margin-top:-200px">
       <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
    </ion-badge>
  </ion-badge>
</ion-content>

And this is what I get :

My background is truncate while it's supposed to fill the white space. But I solve the problem by adding that :

  ngAfterViewInit() {
    this.signaturePad.resizeCanvas(); //that line
    if (this.record.new_signature_base64) {
      this.signaturePad.fromDataURL('data:image/jpeg;base64,' + this.record.new_signature_base64);
    } else {
      this.clear();
    }
  }

But there is another probleme here that I can't solve though my background is good.
The problem is when I draw, my black line doesn't appear where my pen is, but a few pixels on the right.
Here a quick video to demonstrate it :

As you can see there is an offset and I don't really know how to fix it.
FYI : it works very well on large screen, no offset, but not on my Surface

I hope you can help me, thanks a lot.

FromDataUrl reload smaller signature on the top left corner (Ionic2/Cordova)

Hello,
When I save the signature and just call fromDataUrl() with the string generated by toDataUrl()
the image generated is smaller when app is running (Android)

szimek with the signature pad seems to have patched it but still doesn't work here

Adding angular2-signaturepad to systemjs.config file

Hi Everyone,
This package works well with Angular CLI but I want to use this package in my Angular 4.X project which is based on Angular Quickstart and that uses systemjs.config file to register packages. Could you please tell me how do I add this to systemjs.config file ? Following is code of my systemjs.config file
(`
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',

        // angular bundles
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
        'ng2-auto-complete': 'npm:ng2-auto-complete/dist/ng2-auto-complete.umd.js',
        'ng2-bootstrap-modal': 'npm:ng2-bootstrap-modal',
        'angular2-busy': 'npm:angular2-busy',
        'file-saver':'npm:file-saver',
        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './app.main.js',
            defaultExtension: 'js',
        },
        rxjs: {
            defaultExtension: 'js',
            main: 'Rx.js'
        },
        'ng2-bootstrap-modal': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        'angular2-busy': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }
});

})(this);`)

I tried to add this as follows --
Under map -
'angular2-signaturepad':'npm:angular2-signaturepad'
Under Packages -
'angular2-signaturepad': { main: './index.js', defaultExtension: 'js' }

But then it throws error as "localhost:3000/signature_pad" not found Any help would be appreciated. A working example or plunk would be of great help.

systemjs

Do you have an example of loading this in systemjs.confg? I've tried several different attempts with no luck. Thanks

In android > 6 not work?

Hello,

It is possible that from version 6 of android the package does not work?

I have tried the same implementation in the version of android 6 and it works. But in versions 7 and 8 of Android does not work.

Do you know if it can be a bug and you know how to fix it?

Thank you very much. A greeting.

Crop visible area

Hi! I know this is not your problem, but i'm using your plugin with responsivite, for best user experience. After the signer, i need crop the image to visible area. You know a way to help me?

Thanks for this plugin.

Request to upgrade to latest signature_pad

Greetings..

Could you upgrade to the latest signature_pad so that we might have access to the SVG functions.

Thank you in advance.

Mark..

Can't build with latest angular

Hi. I just updated my angular-cli to the latest version.
Now I cant run my project:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in node_modules//core.d.ts, resolving symbol SignaturePadModule in /node_modules/angular2-signaturepad/index.d.ts, resolving symbol SignaturePadModule in node_modules/angular2-signaturepad/index.d.ts

Can you please help?

Fix for Angular 4?

To use your package in Angular 4, I edited the generated signature-pad.js on line 13 in the SignaturePad.prototype.ngAfterContentInit from
var sp = require('signature_pad')['default'];
to
var sp = require('signature_pad');
It had worked fine previously under Angular 2 but broke after our Angular 4 migration.
Just wanted to share the solution.

Background Image

Would it be possible to supply a background image, but only save the signature as a transparent image. That way we could supply and image of a line to sign on.

Thank you in advance..

Getting black image

I am getting black image as a result when run code from the demo.

ScreenOrientation

Hi,
I use the ionic plugin ScreenOrientation to rotate the screen automatically to landscape when the user opens the screen with the signaturepad. The problem is that the signaturepad doesn't work correctly in landscape orientation. When you touch the signature pad on a real device the drawn line is not directly under your finger but rather a bit displaced. In portrait orientation everything works fine.

Could you fix that?

Best regards

Christian

Error after the latest angular and bootstrap updates

Hi, Im using the control for a long time, but this week i updated all my npm packages, the issue is after the updates I'm getting the following error trying to initialize the control.

auth-modal.component.html:5 ERROR TypeError: sp is not a constructor
at SignaturePad.ngAfterContentInit (signature-pad.js:21)
at callProviderLifecycles (core.js:12682)
at callElementProvidersLifecycles (core.js:12656)
at callLifecycleHooksChildrenFirst (core.js:12639)
at checkAndUpdateView (core.js:13789)
at callViewAction (core.js:14136)
at execComponentViewsAction (core.js:14068)
at checkAndUpdateView (core.js:13791)
at callWithDebugContext (core.js:15039)
at Object.debugCheckAndUpdateView [as checkAndUpdateView]

SignaturePad.prototype.ngAfterContentInit = function () { var sp = require('signature_pad')['default']; var canvas = this.elementRef.nativeElement.querySelector('canvas'); if (this.options['canvasHeight']) { canvas.height = this.options['canvasHeight']; } if (this.options['canvasWidth']) { canvas.width = this.options['canvasWidth']; } this.signaturePad = new sp(canvas, this.options); // line breaking this.signaturePad.onBegin = this.onBegin.bind(this); this.signaturePad.onEnd = this.onEnd.bind(this); };

Here is my code:

HTML inside the NgModal ignore the # is just to not render html here

<#div class="modal-header">

Sign

<#/div>

<#div class="modal-body sign-body">
<#signature-pad [options]="signaturePadOptions" style="cursor: default !important"></#signature-pad>
</#div>

<#div class="modal-footer">
<#button type="button" (click)="onCancelClicked($event)" class="btn">
Cancel
<#/button>
<#button type="button" (click)="onSaveClicked($event)" class="btn btn-primary">
Submit
<#/button>

TS File
`
export class AuthModalComponent implements AfterViewInit {
@input() penTickness: number;
@input() title: string;
@ViewChild(SignaturePad) signaturePad: SignaturePad;

signaturePadOptions: Object = {
'minWidth': 2,
'canvasWidth': 500,
'canvasHeight': 100
};

constructor(private activeModal: NgbActiveModal) { }

ngAfterViewInit() {
if (this.penTickness) {
this.signaturePad.set('minWidth', this.penTickness);
}
this.signaturePad.clear();
}

onSaveClicked() {
this.activeModal.close(this.signaturePad);
}

onCancelClicked() {
this.activeModal.dismiss(this.signaturePad);
}
}

`

Any idea how could i fix the issue?

Thanks

Unable to set background to opaque

Hey,
Something happened over the last week or so and now my signatures are saving with a black transparent background. I'd had this issue previously, and resolved it by setting the background colour to white, as follows. This HAD been working previously... any thoughts on what I need to do to fix this??? (I apologize for such a long post, just wanted to make sure all info was here)

clockOut.html:
<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>

in my clockOut.component.ts:

` @ ViewChild(SignaturePad) SignaturePad: SignaturePad;
@ ViewChildren('signatureContainingDiv') public signatureContainingDiv: QueryList< ElementRef >;

private signature: any = null;
private signaturePadOptions: Object = { 
    'minWidth': 3,
    'canvasHeight': 150,
    'backgroundColor': 'rgb(255,255,255)'   // we must set it to white, otherwise when we save it, it's transparent.
};

drawComplete() {
    this.signature = this.SignaturePad.toDataURL();
}`

However, this no longer seems to make a difference. I've tried changing the above statement to set the background to rgba(255,255,255,1) and rgba(255,255,255,0), and that didn't do anything either.

I tried adding a statement into my drawComplete method, just before calling toDataURL(), but this also didn't make a difference:
this.SignaturePad.set('backgroundColor', 'rgba(255,255,255,0)');

Here's a section from my gulpfile.js:
gulp.task("scriptsNStyles", () => { gulp.src([ <other stuff here> 'angular2-signaturepad/*.js', 'signature_pad/dist/*.js' ], { cwd: "node_modules/**" }) .pipe(gulp.dest("./libs")); });

and the relevant portion from my package.json file:
"dependencies": { "@angular/common": "~2.1.1", "@angular/compiler": "~2.1.1", "@angular/core": "~2.1.1", "@angular/forms": "~2.1.1", "@angular/http": "~2.1.1", "@angular/platform-browser": "~2.1.1", "@angular/platform-browser-dynamic": "~2.1.1", "@angular/router": "~3.1.1", "@angular/upgrade": "~2.1.1", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.9", "angular-in-memory-web-api": "~0.1.13", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "linq": "^3.0.5", "moment": "^2.15.2", **"angular2-signaturepad": "2.2.0", "signature_pad": "2.0.0",** "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.26" },

and my system.js.config.js file:

System.config({ paths: { 'npm:': '/libs/' }, map: { <Other Stuff Here>, 'angular2-signaturepad': 'npm:angular2-signaturepad', 'signature_pad': 'npm:signature_pad', <Other Stuff Here> }, packages: { <Other Stuff Here>, 'angular2-signaturepad': { main: 'index.js', defaultExtension: 'js' }, 'signature_pad': { main: 'dist/signature_pad.js', defaultExtension: 'js' }, <Other Stuff Here> } });

SystemJS configuration

What is the prefered way to setup the systemJS configuration, that angular2-signaturepad could load correctly in my angular app?

Thanks!

fromDataURL only takes 1/4 of the canvas dimension

When applying an image using the fromDataURL function, the image doesn't take the entire canvas dimension. To make sure the problem wasn't in my code I used the example project from the README and the problem persisted:

How to make signaturepad respnsive?

'canvasWidth': 500, 'canvasHeight': 300
I have this code but how can i make signaturepad respnsive with media scren

ERROR TypeError: sp is not a constructor

Using with Angular4.x non AOT compile. The Error is Run-time on latest chrome. Here's the stack trace:

myComponent.html:2843 ERROR TypeError: sp is not a constructor
at SignaturePad.ngAfterContentInit (signature-pad.js:20)
at callProviderLifecycles (core.es5.js:11046)
at callElementProvidersLifecycles (core.es5.js:11027)
at callLifecycleHooksChildrenFirst (core.es5.js:11011)
at checkAndUpdateView (core.es5.js:12028)
at callViewAction (core.es5.js:12340)
at execEmbeddedViewsAction (core.es5.js:12312)
at checkAndUpdateView (core.es5.js:12026)
at callViewAction (core.es5.js:12340)
at execEmbeddedViewsAction (core.es5.js:12312)
at checkAndUpdateView (core.es5.js:12026)
at callViewAction (core.es5.js:12340)
at execComponentViewsAction (core.es5.js:12286)
at checkAndUpdateView (core.es5.js:12031)
at callViewAction (core.es5.js:12340)

Undo action

Hi,
I find that exists clear method, is there action for undo the last draw?

fromDataURL only takes 1/4 of the canvas dimension

Hello,
Thanks for the code! Very useful
I am still having the issue I could find here #35 and szimek/signature_pad#89

and when I use fromDataURL() (to use the undo ) function, I have:

Thanks for your help!

Update to last signature_pad version (2.2.0)

A new version of signature_pad has been released and include a new feature to deal with custom ratio/width/height when loading data URL.

It will be great to get it available in angular2-signaturepad.

Multiple signature pad reference within one component template

Hi,
We really need help for multiple signature pad reference.
We can easily refer to one signature:
@ViewChild(SignaturePad) signaturePad: SignaturePad;

How to deal with multiple:
`

<signature-pad accept="sp['sig1'].accept" clear="sp['sig1'].clear" dataurl="sp['sig1'].dataurl" [options]="signaturePadOptions" (onEndEvent)="drawComplete('sig1')">

`

Component work but without Bézier

Hello,

Your component work fine in my Angular 4 application. But, without Bézier effect !

Trying to convert signaturePad to JPEG

Hi - I'm trying to convert the signature to JPG and it don't seem to work. It seems to return as the default (image/png).

this.signaturePad.toDataURL("image/jpeg");

Any ideas why this might be? Thanks!