meteor-signature-pad
Meteor wrapper for https://github.com/szimek/signature_pad
Installation
meteor add cunneen:signature-pad
Usage
HTML
1<template name="sigpad"> 2 <div id="signature-pad" class="m-signature-pad"> 3 <div class="m-signature-pad--body"> 4 <canvas></canvas> 5 </div> 6 <div class="m-signature-pad--footer"> 7 <div class="description">Sign above</div> 8 <button class="button clear" data-action="clear">Clear</button> 9 <button class="button save" data-action="save">Save</button> 10 </div> 11 </div> 12</template>
JavaScript
1var wrapper, 2 clearButton , 3 saveButton, 4 canvas, 5 signaturePad; 6 7Template.sigpad.rendered = function() { 8 wrapper = document.getElementById("signature-pad"); 9 canvas = wrapper.querySelector("canvas"); 10 11 // Adjust canvas coordinate space taking into account pixel ratio, 12 // to make it look crisp on mobile devices. 13 // This also causes canvas to be cleared. 14 function resizeCanvas() { 15 // When zoomed out to less than 100%, for some very strange reason, 16 // some browsers report devicePixelRatio as less than 1 17 // and only part of the canvas is cleared then. 18 var ratio = Math.max(window.devicePixelRatio || 1, 1); 19 canvas.width = canvas.offsetWidth * ratio; 20 canvas.height = canvas.offsetHeight * ratio; 21 canvas.getContext("2d").scale(ratio, ratio); 22 } 23 24 window.onresize = resizeCanvas; 25 resizeCanvas(); 26 27 signaturePad = new SignaturePad(canvas); 28}; 29 30Template.sigpad.events({ 31 "click [data-action=clear]": function() { 32 signaturePad.clear(); 33 }, 34 "click [data-action=save]": function() { 35 if (signaturePad.isEmpty()) { 36 alert("Please provide signature first."); 37 } else { 38 window.open(signaturePad.toDataURL()); 39 } 40 }, 41});