It would be nice to have a minified version of the library #

I am having an issue when show/hide the canvas.
I created a page using bootstrap tabs, on each tabs, i have an signature canvas.
In first time page loaded, the canvas display well on 2 tabs, but when switch back tabs, the width/height of that canvas set to 0.
As i debugging it, the function calculateScale() called to calculate the width/height and ratio of canvas, but when the canvas is hidden, it can't get the width/height.

How can i re-call to init width/height from the values that passed as property param in the directive?

<div class="container" style="max-width: 700px; max-height: 300px">
    <signature-pad accept="accept" clear="clear" height="220" width="568" dataurl="dataurl"></signature-pad>

Hi,
I am getting base64 image data and uploading into a server, then server converts it into an image file and save in some location and return a web URL. After that, I want to edit the same signature then how I can draw the same image into the canvas.

I would like to have the height automatically. Whit this way to set pad dimensions is impossible to create a code usable on mobile device.

I am having a problem when I create two instances of signature pad. Only the late one is working properly but first one is not. As you can see in the below image. Please can anyone help. Thank you

HI,
I am using signaturePad with Angular 1.3.17, and I am not able to draw anything in the pad.
I am debbuging signature.js and I think the mouseDown event is not working, even if mousup is working fine.

It seems something in signature.js is not working as expected

I am running it into a modal.

Tested both in Chrome and Firefox. This issue is intermittent

Hi Guys

We picked up an issue with the signing stuff. On first time signing the canvas picks up the touch event fine and is accurate. On second signing the canvas sort of picks up touch event off from point of touch.

Open this plunker on a device with window.devicePixelRatio > 1 (I tried Chrome browser on a Sony Z1 Compact):

http://embed.plnkr.co/YuVymgoJ9D4ohA3ipnuO/

The button "Clear and restore" accepts the signature and stores the data-url into a local variable. It then clears the pad and sets the data-url of the pad to the stored, just-read value.

Expected result: the signature should look the same.
Actual result: the signature is smaller than before.

The cause of this issue is very much related to the issue #1 (which apparently was closed with neither a solution nor explanation). The directive forces the canvas width/height to be the same as its container, but it needs to be larger on high dpi devices (otherwise the onResize event handler would not make sense). Additionally it might be necessary to first resize the canvas and then construct the SignaturePad, like shown in the demo of the SignaturePad.

Possible solution: resize earlier, and do not bind the canvas' width / height to the directives attributes. Leave it to the user to style the container via CSS and set the canvas CSS width/height to 100%. See http://embed.plnkr.co/ISkqtUMFNh0JBqnXLpzm/

when i zoom in the browser (> 100%), then ctrl + 0 to back, i draw out of the region of the canvas

I realize this is the most vague error ever, but every once in a while when clicking through the application I'm building all signature pads stop accepting any kind of mouse input. Any idea where I should look to see what could be happening?

Thanks for your work on this!

angular.js:13550 Error: [$compile:nonassign] Expression 'undefined' in attribute 'dataurl' used with directive 'signaturePad' is non-assignable!

my use case is fairly simple - almost straight from the sample

<div>
    <div class="modal-header">
        <button type="button" class="close pull-right" ng-click="$dismiss()" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{vm.label}}</h4>
    </div>
    <div class="modal-body">
        <p>
            Sign here:
            <div class="sig-border">
                <signature-pad accept="vm.accept" clear="clear"></signature-pad>
            </div>
        </p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
        <button type="button" class="btn btn-default" ng-click="clear()">Clear</button>
        <button type="button" class="btn btn-primary" ng-click="vm.sign()">Sign</button>
    </div>
</div>

vm.sign = function(){
            var signature = vm.accept();
            if (!signature.isEmpty) {
                $scope.$close(signature.dataUrl);
            }
        };

I cannot disable this, tried using ng-disabled but it did not work. However, there is an option from here like this signaturePad.off();. I'm not sure where to put it.

First, thanks for your work !

I want to report a problem when you start to draw a signature in the canvas and release the mouse outside the canvas.
The line is not saved.

Simply add ng-mouseleave="onMouseup()" in the canvas declaration to fix the problem :)

I'm having an issue with the canvas size

<signature-pad dataurl="" accept="accept" clear="clear" ng-model="invoice.signature"
               style="width: 300px; height: 150px; border: 1px solid black;"></signature-pad>
<button ng-click="clear()">Clear signature</button>
<button ng-click="invoice.signature = accept(); checkSign(invoice.signature)">Sign</button>

This is only happening in a macbook environment. When I try the app in a windows or linux it works as expected.

Use Travis to automatically deploy a new version upon creating a new tag.

To allow easier integration with projects using webpack; so the following code works:

require('angular-signature');

angular.module('ownModule'), [
  'signature'
].value('SignaturePad', require('signature_pad'));

without putting anything on the global scope.

adding:

angular.module('signature').value('SignaturePad', SignaturePad)

in signature.js & using DI for SignaturePad should do a trick

It seems like .dataUrl property is never set in the 'accept' function anymore and so there's no way to get the url back (dataurlattribute also doesn't get it since it itself uses 'accept' to get the signature).
Looks like the line was deleted as part of "Issue 34" commit.

As you can see in the below image the screen is rendered in the way.

You cant test the below code in base64 to image converted websites

EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA='

IN Windows chrome its proper transparent image but in MAC safari its a black image.

A simple solution would be to use the below base64 data

EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='

Verified in IOS and the above data shows proper transparent image in both the browsers.

Add units tests with Jasmine and Karma.

Affected Angular versions: at least 1.5.7, 1.6.4

How to reproduce:

1. Download demo code
2. Add this snippet inside the main function in app.js:

    var nbDigest = 0;
    $rootScope.$watch(function() {
      nbDigest++;
      console.log('.');
    });

3. Observe digest getting called indefinitely.

This is a problem in complex applications with many different elements on the screen, since the whole lot of it gets reevaluated multiple times per second and crashes the browser.

So I finally figured how what our issue is, sorry to keep bugging you about it:

Hi,

I was having issues using the signature pad on a modal popup, so I tried taking your latest github code.
What I found is that when the screen is resized (say by rotating a mobile from portrait to landscape) the canvas size is doubling each time, because in the onResize() method below the "ratio" is 2.

Is this something you're aware of / looking at?

I've fixed it on a local version by doing this, but there may be a better way:

scope.onResize = function () {
  var canvas = element.find('canvas')[0];
   // Make it visually fill the positioned parent
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  // ...then set the internal size to match
   canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  // reset dataurl
  scope.dataurl = null;
};

• If user starts signing and goes out of canvas, the signature data is not updated which may be confusing for user.
• The reason is that touchEnd event is not fired within the directive which triggers the update (updateModel() method).
• One way to handle this is by also updating the signature data when user goes out of the canvas using focus-out.

Hi there,

I don't know if I may have glanced over it, but is it possible to reload a signature back into signature-pad? Simply trying to reapply the dataUrl doesn't work.

Thank you,
-David Kluszczynski

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/@angular/core/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?

Hello, is this repo still maintained?
Or are you requesting for adoption? Or should we look for a maintained fork?

When I click to sign button then clear image then click to reset button.
So signature image is not come exact fit.

How to change background color, or even remove it to make it transparent?

The minimum angular version mentioned in bower.json is 1.3 while there are two usages of $timeout() (at https://github.com/legalthings/angular-signature/blob/master/src/signature.js#L50 and https://github.com/legalthings/angular-signature/blob/master/src/signature.js#L92) with no params which causes error in angular < 1.4.

Either the dependency of angular or the usage of the function must be modified. I'll suggest to change the usage as it'll broaden the usability of package.

<signature-pad accept="accept" clear="clear" height="300" width="500"></signature-pad>

The canvas should height and width if the container allows it. However is the container is smaller than the specified dimensions, for example because of a small viewport (on a mobile phone) or because of a small modal, the canvas should be scaled down to fit the container using canvas.getContext("2d").scale(). It should respect the aspect ratio.

The container <div> should not have a fixed width and height, but have a max-width and max-height instead. The container should always fit within the container <div>, but maintaining it's aspect ratio (so the container is a bounding box).

Currently there is an $timeout of 500 milliseconds. This is completely arbitrary. Also there is callback for the window.resize event, but that also doesn't cut it, because there are other reasons why the container may change in size. The plugin should simply always make sure that the canvas fits (using $interval or some better way).

If you fire the onMouseup event outside the canvas the updateModel() isn't called so if you accept() the sign it could be empty or wrong..
I've fixed adding modifying the accept() like this:

$scope.accept = function () {

    $scope.dataurl = $scope.signaturePad.isEmpty() ? EMPTY_IMAGE : $scope.signaturePad.toDataURL();
    return {
        isEmpty: $scope.dataurl === EMPTY_IMAGE,
        dataUrl: $scope.dataurl
    };
};

From what I can tell. You can only have one signature spot on a page. If two people must sign a document, the accept and clear buttons will only reference the second signature pad, even if the accept="" and clear="" attributes for the different pads reference different buttons.

<signature-pad accept="accept1" clear="clear1"></signature-pad>
<button ng-click="clear1()">Clear signature</button>
<button ng-click="signature1 = accept1()">Sign</button>

<signature-pad accept="accept2" clear="clear2"></signature-pad>
<button ng-click="clear2()">Clear signature</button>
<button ng-click="signature2 = accept2()">Sign</button>

Even though they have different buttons, hitting the clear button for either signature pad will clear the second pad. The first pad is rendered useless if a second pad exists.

Getting JS error from line 116: $interval.stop is not a function
This should be $interval.cancel(...)I believe.

When working with the simple example, I get this error as soon as the page is loaded:

VM697 angular.min.js:103 Error: [$compile:nonassign] http://errors.angularjs.org/1.3.8/$compile/nonassign?p0=undefined&p1=signaturePad
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:58:364)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:58:441)
    at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:109:503)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:310)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)

and when I draw the signature, I see this error in the console:

VM697 angular.min.js:103 TypeError: f is not a function

However, the signature is working, and the Data URL is being retrieved.

Check sample here:

http://plnkr.co/edit/TvpmtxjulMFHtTCR6SnZ?p=preview

Press F12 to see the console errors.

Is there something wrong with my code?

Tarek

I am able to get the signature-pad directive to work on a normal HTML page.

However, the directive won't load on a modal form. I've tried using it with $uibModal and $modal services with no luck.

Any ideas?

I'm basically encountering this issue:
http://stackoverflow.com/questions/32639020/offsetwidth-offsetheight-is-zero-when-template-loaded-by-ngroute

The offsetWidth and offsetHeight of the canvas are initially set to zero. When I look at the rendered html it has a fixed width/height on the canvas element of 0. This results in not being able to draw on the canvas because it occupies no space. I can workaround this by resizing the window, and then can draw.

However, I wrote a fix which seems to work.

I also fixed another bug that cleared the signature when you resized the window. Here is the code:

scope.onResize = function() {
	var canvas = element.find('canvas')[0];
	var ratio =  Math.max($window.devicePixelRatio || 1, 1);
	var newWidth = canvas.offsetWidth * ratio;
	var newHeight = canvas.offsetHeight * ratio;
	// The offsetWidth and offsetHeight can be zero when the canvas is initialized via before the DOM is ready.
	// Also, prevent unneccessary clearing of the image. Don't set width/height unless its actually different.
	if (newWidth > 0 && newWidth !== canvas.width) canvas.width = newWidth;
	if (newHeight > 0 && newHeight !== canvas.height) canvas.height = newHeight;
	canvas.getContext("2d").scale(ratio, ratio);
}

I'm getting this error in my console.
SignaturePad is not defined
at link (http://localhost:8100/lib/signature.js:81:34)

When I click into the signature.js to this line:character,
scope.signaturePad = new SignaturePad(canvas);

How can I fix this?

I can´t set a signature. Can you show me a example?

Add a README.md with description and installation instructions.

Signature functions all work ok, but I get this in the console.

angular.min.js:123 TypeError: scope.signaturePad.on is not a function
    at signature.js:99
    at m.$digest (angular.min.js:146)
    at m.$apply (angular.min.js:149)
    at l (angular.min.js:102)
    at XMLHttpRequest.A.onload (angular.min.js:107)

Angular version 1.6.4
Jquery version 2.1.4

Hi
How can I save the signature in db and later show the signature on the form retrieved from db?

Thanks

You have a massive typo FYI. In the definition of $scope.accept you have
( commit df28083 for reference )

          $scope.accept = function () {
                var signature = {};
                if (!$scope.signaturePad.isEmpty()) {
                    signature.isEmpty = false;
                } else {
                    signature.dataUrl = EMPTY_IMAGE;
                    signature.isEmpty = true;
                }

                return signature;
            };

...

should be

 $scope.accept = function () {
                var signature = {};

                if (!$scope.signaturePad.isEmpty()) {
                    signature.isEmpty = false;
                    //WHY WAS THIS MISSSING?!?!?!?!
                    signature.dataUrl = $scope.signaturePad.toDataURL("image/gif");
                } else {
                    signature.dataUrl = EMPTY_IMAGE;
                    signature.isEmpty = true;
                }

                return signature;
            };

So the scope item which is set equal to the directive's 'accept' attribute would be only {isEmpty = false}. With the change above, That line was in the code but someone took it out in an update. For the life of me, I could not figure out why, because the directive loses half of its functionality.

saving signature to nosql database like mongo and nedb
Please provide documnentaiton

Currently it seems that only pixel widths/heights are allowed in the form definition, e.g.

width: 100,
height: 100

To support responsive layouts, it would be helpful if other units are supported, e.g.

width: '50%',
height: '50%'

I'm getting this weird console error sometimes whenever I write on the signature canvas.

The signature is working correctly and saving as it's suppose to but this pops up now and then.

<signature-pad accept="accept" clear="clear" ng-model="signature" height="220" width="568"></signature-pad>
          <button ng-click="clear()">Clear signature</button>
          <button ng-click="signature = accept(); checkSign(signature)">Sign</button>

The signature pad needs to be scaled to fit the screen.
The canvas is sized with these html properties (from template):

<canvas height="220" width="568"></canvas>

Applying CSS width and height elements to the canvas scales the context instead of resizing the canvas, providing an offset to every stroke.