https://github.com/cunneen/meteor-signature-pad

Meteor wrapper for https://github.com/szimek/signature_pad
https://github.com/cunneen/meteor-signature-pad

Last synced: 3 months ago
JSON representation

Meteor wrapper for https://github.com/szimek/signature_pad

• Host: GitHub
• URL: https://github.com/cunneen/meteor-signature-pad
• Owner: cunneen
• Created: 2015-02-08T10:46:44.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-15T14:39:38.000Z (over 8 years ago)
• Last Synced: 2024-01-22T05:17:39.180Z (5 months ago)
• Language: JavaScript
• Size: 27.3 KB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-starter - esignature - Signature pad (Packages)

README

        
# meteor-signature-pad

Meteor wrapper for https://github.com/szimek/signature_pad

## Installation

```

meteor add cunneen:signature-pad

```

## Usage

HTML

```html

  


    


      

    

    


      
Sign above

      Clear

      Save

    

  


```

JavaScript

```js

var wrapper,

    clearButton ,

    saveButton,

    canvas,

    signaturePad;

Template.sigpad.rendered = function() {

  wrapper = document.getElementById("signature-pad");

  canvas = wrapper.querySelector("canvas");

  // Adjust canvas coordinate space taking into account pixel ratio,

  // to make it look crisp on mobile devices.

  // This also causes canvas to be cleared.

  function 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.

      var ratio =  Math.max(window.devicePixelRatio || 1, 1);

      canvas.width = canvas.offsetWidth * ratio;

      canvas.height = canvas.offsetHeight * ratio;

      canvas.getContext("2d").scale(ratio, ratio);

  }

  

  window.onresize = resizeCanvas;

  resizeCanvas();

  

  signaturePad = new SignaturePad(canvas);

};

Template.sigpad.events({

  "click [data-action=clear]": function() {

    signaturePad.clear();

  },

  "click [data-action=save]": function() {

    if (signaturePad.isEmpty()) {

        alert("Please provide signature first.");

    } else {

        window.open(signaturePad.toDataURL());

    }

  },

});

```