thread-pond / signature-pad Goto Github PK

Dear Sir,

Signature pad is working very well on my local mach but when put on the iis getting error
like typeError:$('.sigPad').signaturePad is not a function.
kindly help me it's very urgent

Regards,
Afroz khan

I am using signature-pad in a .NET 4/MVC 3 application. I have the control displaying properly and saving both the output and the output as an image (bytes) into a SQL database. My issue is when I try to regenerate the signature - I get the following javascript error:

SCRIPT1014: Invalid character
jquery.signaturepad.min.js, line 25 character 499

The line in the js file is when the output string is trying to be parsed.
Am I missing some type of conversion or encoding that needs to be done on the output string?
My output string (from the database) is :
[{"lx":14,"ly":27,"mx":14,"my":26},{"lx":15,"ly":26,"mx":14,"my":27},{"lx":17,"ly":26,"mx":15,"my":26},{"lx":18,"ly":26,"mx":17,"my":26},{"lx":19,"ly":26,"mx":18,"my":26},{"lx":21,"ly":26,"mx":19,"my":26},{"lx":24,"ly":26,"mx":21,"my":26},{"lx":28,"ly":26,"mx":24,"my":26},{"lx":30,"ly":24,"mx":28,"my":26},{"lx":32,"ly":23,"mx":30,"my":24},{"lx":34,"ly":22,"mx":32,"my":23},{"lx":35,"ly":20,"mx":34,"my":22},{"lx":35,"ly":19,"mx":35,"my":20},{"lx":37,"ly":18,"mx":35,"my":19},{"lx":37,"ly":17,"mx":37,"my":18},{"lx":37,"ly":19,"mx":37,"my":17},{"lx":37,"ly":22,"mx":37,"my":19},{"lx":37,"ly":24,"mx":37,"my":22},{"lx":36,"ly":28,"mx":37,"my":24},{"lx":35,"ly":35,"mx":36,"my":28},{"lx":34,"ly":38,"mx":35,"my":35},{"lx":33,"ly":42,"mx":34,"my":38},{"lx":33,"ly":45,"mx":33,"my":42},{"lx":33,"ly":46,"mx":33,"my":45},{"lx":33,"ly":47,"mx":33,"my":46},{"lx":33,"ly":44,"mx":33,"my":47},{"lx":33,"ly":41,"mx":33,"my":44},{"lx":33,"ly":39,"mx":33,"my":41},{"lx":33,"ly":34,"mx":33,"my":39},{"lx":34,"ly":31,"mx":33,"my":34},{"lx":34,"ly":28,"mx":34,"my":31},{"lx":35,"ly":27,"mx":34,"my":28},{"lx":35,"ly":25,"mx":35,"my":27},{"lx":36,"ly":24,"mx":35,"my":25},{"lx":37,"ly":23,"mx":36,"my":24},{"lx":37,"ly":21,"mx":37,"my":23},{"lx":38,"ly":20,"mx":37,"my":21},{"lx":39,"ly":18,"mx":38,"my":20},{"lx":41,"ly":18,"mx":39,"my":18},{"lx":43,"ly":18,"mx":41,"my":18},{"lx":44,"ly":18,"mx":43,"my":18},{"lx":45,"ly":19,"mx":44,"my":18},{"lx":46,"ly":20,"mx":45,"my":19},{"lx":47,"ly":21,"mx":46,"my":20},{"lx":48,"ly":23,"mx":47,"my":21},{"lx":48,"ly":24,"mx":48,"my":23},{"lx":48,"ly":25,"mx":48,"my":24},{"lx":48,"ly":27,"mx":48,"my":25},{"lx":48,"ly":30,"mx":48,"my":27},{"lx":46,"ly":31,"mx":48,"my":30},{"lx":43,"ly":32,"mx":46,"my":31},{"lx":41,"ly":33,"mx":43,"my":32},{"lx":40,"ly":34,"mx":41,"my":33},{"lx":39,"ly":34,"mx":40,"my":34},{"lx":39,"ly":35,"mx":39,"my":34},{"lx":39,"ly":36,"mx":39,"my":35},{"lx":40,"ly":36,"mx":39,"my":36},{"lx":41,"ly":36,"mx":40,"my":36},{"lx":42,"ly":36,"mx":41,"my":36},{"lx":44,"ly":37,"mx":42,"my":36},{"lx":45,"ly":38,"mx":44,"my":37},{"lx":47,"ly":38,"mx":45,"my":38},{"lx":47,"ly":39,"mx":47,"my":38},{"lx":48,"ly":40,"mx":47,"my":39},{"lx":48,"ly":41,"mx":48,"my":40},{"lx":48,"ly":42,"mx":48,"my":41},{"lx":46,"ly":42,"mx":48,"my":42},{"lx":45,"ly":42,"mx":46,"my":42},{"lx":43,"ly":42,"mx":45,"my":42},{"lx":41,"ly":43,"mx":43,"my":42},{"lx":39,"ly":43,"mx":41,"my":43},{"lx":38,"ly":43,"mx":39,"my":43},{"lx":65,"ly":18,"mx":65,"my":17},{"lx":66,"ly":17,"mx":65,"my":18},{"lx":67,"ly":19,"mx":66,"my":17},{"lx":69,"ly":21,"mx":67,"my":19},{"lx":72,"ly":25,"mx":69,"my":21},{"lx":74,"ly":27,"mx":72,"my":25},{"lx":77,"ly":29,"mx":74,"my":27},{"lx":79,"ly":31,"mx":77,"my":29},{"lx":81,"ly":33,"mx":79,"my":31},{"lx":82,"ly":34,"mx":81,"my":33},{"lx":83,"ly":35,"mx":82,"my":34},{"lx":84,"ly":36,"mx":83,"my":35},{"lx":84,"ly":37,"mx":84,"my":36},{"lx":85,"ly":38,"mx":84,"my":37},{"lx":85,"ly":39,"mx":85,"my":38},{"lx":85,"ly":40,"mx":85,"my":39},{"lx":85,"ly":41,"mx":85,"my":40},{"lx":84,"ly":42,"mx":85,"my":41},{"lx":84,"ly":43,"mx":84,"my":42},{"lx":82,"ly":44,"mx":84,"my":43},{"lx":81,"ly":46,"mx":82,"my":44},{"lx":79,"ly":46,"mx":81,"my":46},{"lx":77,"ly":47,"mx":79,"my":46},{"lx":76,"ly":47,"mx":77,"my":47},{"lx":75,"ly":47,"mx":76,"my":47},{"lx":74,"ly":46,"mx":75,"my":47},{"lx":58,"ly":22,"mx":58,"my":21},{"lx":59,"ly":21,"mx":58,"my":22},{"lx":60,"ly":21,"mx":59,"my":21},{"lx":63,"ly":21,"mx":60,"my":21},{"lx":67,"ly":21,"mx":63,"my":21},{"lx":70,"ly":21,"mx":67,"my":21},{"lx":76,"ly":20,"mx":70,"my":21},{"lx":80,"ly":19,"mx":76,"my":20},{"lx":84,"ly":17,"mx":80,"my":19},{"lx":89,"ly":16,"mx":84,"my":17},{"lx":92,"ly":14,"mx":89,"my":16},{"lx":94,"ly":14,"mx":92,"my":14},{"lx":96,"ly":12,"mx":94,"my":14},{"lx":106,"ly":34,"mx":106,"my":33},{"lx":105,"ly":32,"mx":106,"my":34},{"lx":104,"ly":32,"mx":105,"my":32},{"lx":103,"ly":32,"mx":104,"my":32},{"lx":101,"ly":32,"mx":103,"my":32},{"lx":100,"ly":32,"mx":101,"my":32},{"lx":98,"ly":33,"mx":100,"my":32},{"lx":96,"ly":33,"mx":98,"my":33},{"lx":95,"ly":34,"mx":96,"my":33},{"lx":93,"ly":36,"mx":95,"my":34},{"lx":93,"ly":37,"mx":93,"my":36},{"lx":92,"ly":38,"mx":93,"my":37},{"lx":92,"ly":39,"mx":92,"my":38},{"lx":93,"ly":39,"mx":92,"my":39},{"lx":94,"ly":39,"mx":93,"my":39},{"lx":96,"ly":39,"mx":94,"my":39},{"lx":98,"ly":39,"mx":96,"my":39},{"lx":100,"ly":39,"mx":98,"my":39},{"lx":103,"ly":39,"mx":100,"my":39},{"lx":105,"ly":39,"mx":103,"my":39},{"lx":106,"ly":39,"mx":105,"my":39},{"lx":107,"ly":38,"mx":106,"my":39},{"lx":108,"ly":37,"mx":107,"my":38},{"lx":108,"ly":36,"mx":108,"my":37},{"lx":108,"ly":35,"mx":108,"my":36},{"lx":108,"ly":34,"mx":108,"my":35},{"lx":108,"ly":33,"mx":108,"my":34},{"lx":108,"ly":34,"mx":108,"my":33},{"lx":108,"ly":36,"mx":108,"my":34},{"lx":108,"ly":39,"mx":108,"my":36},{"lx":108,"ly":40,"mx":108,"my":39},{"lx":108,"ly":42,"mx":108,"my":40},{"lx":108,"ly":43,"mx":108,"my":42},{"lx":109,"ly":43,"mx":108,"my":43},{"lx":110,"ly":43,"mx":109,"my":43},{"lx":111,"ly":44,"mx":110,"my":43},{"lx":112,"ly":44,"mx":111,"my":44},{"lx":113,"ly":44,"mx":112,"my":44},{"lx":116,"ly":44,"mx":113,"my":44},{"lx":117,"ly":43,"mx":116,"my":44},{"lx":119,"ly":40,"mx":117,"my":43},{"lx":119,"ly":38,"mx":119,"my":40},{"lx":121,"ly":36,"mx":119,"my":38},{"lx":122,"ly":34,"mx":121,"my":36},{"lx":123,"ly":31,"mx":122,"my":34},{"lx":123,"ly":30,"mx":123,"my":31},{"lx":123,"ly":28,"mx":123,"my":30},{"lx":124,"ly":27,"mx":123,"my":28},{"lx":124,"ly":26,"mx":124,"my":27},{"lx":125,"ly":25,"mx":124,"my":26},{"lx":126,"ly":25,"mx":125,"my":25},{"lx":127,"ly":25,"mx":126,"my":25},{"lx":128,"ly":25,"mx":127,"my":25},{"lx":129,"ly":26,"mx":128,"my":25},{"lx":130,"ly":27,"mx":129,"my":26},{"lx":129,"ly":27,"mx":130,"my":27},{"lx":129,"ly":29,"mx":129,"my":27},{"lx":128,"ly":29,"mx":129,"my":29},{"lx":128,"ly":30,"mx":128,"my":29},{"lx":128,"ly":31,"mx":128,"my":30},{"lx":128,"ly":33,"mx":128,"my":31},{"lx":128,"ly":34,"mx":128,"my":33},{"lx":129,"ly":35,"mx":128,"my":34},{"lx":130,"ly":38,"mx":129,"my":35},{"lx":131,"ly":38,"mx":130,"my":38},{"lx":132,"ly":38,"mx":131,"my":38},{"lx":134,"ly":39,"mx":132,"my":38},{"lx":137,"ly":39,"mx":134,"my":39},{"lx":138,"ly":39,"mx":137,"my":39},{"lx":139,"ly":39,"mx":138,"my":39},{"lx":142,"ly":37,"mx":139,"my":39},{"lx":142,"ly":36,"mx":142,"my":37},{"lx":143,"ly":35,"mx":142,"my":36},{"lx":144,"ly":33,"mx":143,"my":35},{"lx":145,"ly":31,"mx":144,"my":33},{"lx":146,"ly":31,"mx":145,"my":31},{"lx":147,"ly":31,"mx":146,"my":31},{"lx":148,"ly":31,"mx":147,"my":31},{"lx":149,"ly":31,"mx":148,"my":31},{"lx":147,"ly":32,"mx":149,"my":31},{"lx":147,"ly":33,"mx":147,"my":32},{"lx":146,"ly":35,"mx":147,"my":33},{"lx":145,"ly":36,"mx":146,"my":35},{"lx":145,"ly":37,"mx":145,"my":36},{"lx":145,"ly":39,"mx":145,"my":37},{"lx":145,"ly":40,"mx":145,"my":39},{"lx":145,"ly":41,"mx":145,"my":40},{"lx":145,"ly":42,"mx":145,"my":41},{"lx":145,"ly":43,"mx":145,"my":42},{"lx":146,"ly":44,"mx":145,"my":43},{"lx":147,"ly":44,"mx":146,"my":44},{"lx":149,"ly":44,"mx":147,"my":44},{"lx":150,"ly":42,"mx":149,"my":44},{"lx":150,"ly":40,"mx":150,"my":42},{"lx":150,"ly":39,"mx":150,"my":40},{"lx":150,"ly":38,"mx":150,"my":39},{"lx":150,"ly":36,"mx":150,"my":38},{"lx":150,"ly":35,"mx":150,"my":36},{"lx":149,"ly":33,"mx":150,"my":35},{"lx":149,"ly":31,"mx":149,"my":33},{"lx":148,"ly":31,"mx":149,"my":31},{"lx":148,"ly":30,"mx":148,"my":31},{"lx":148,"ly":29,"mx":148,"my":30},{"lx":148,"ly":28,"mx":148,"my":29},{"lx":148,"ly":26,"mx":148,"my":28},{"lx":148,"ly":24,"mx":148,"my":26},{"lx":148,"ly":22,"mx":148,"my":24},{"lx":148,"ly":20,"mx":148,"my":22},{"lx":148,"ly":17,"mx":148,"my":20},{"lx":148,"ly":16,"mx":148,"my":17},{"lx":148,"ly":15,"mx":148,"my":16},{"lx":149,"ly":16,"mx":148,"my":15},{"lx":150,"ly":19,"mx":149,"my":16},{"lx":152,"ly":23,"mx":150,"my":19},{"lx":153,"ly":29,"mx":152,"my":23},{"lx":154,"ly":31,"mx":153,"my":29},{"lx":156,"ly":34,"mx":154,"my":31},{"lx":158,"ly":38,"mx":156,"my":34},{"lx":159,"ly":41,"mx":158,"my":38},{"lx":162,"ly":43,"mx":159,"my":41},{"lx":164,"ly":47,"mx":162,"my":43},{"lx":166,"ly":49,"mx":164,"my":47},{"lx":167,"ly":51,"mx":166,"my":49},{"lx":169,"ly":52,"mx":167,"my":51},{"lx":169,"ly":53,"mx":169,"my":52},{"lx":171,"ly":54,"mx":169,"my":53},{"lx":172,"ly":54,"mx":171,"my":54},{"lx":172,"ly":53,"mx":172,"my":54},{"lx":172,"ly":51,"mx":172,"my":53},{"lx":172,"ly":46,"mx":172,"my":51},{"lx":172,"ly":44,"mx":172,"my":46},{"lx":172,"ly":43,"mx":172,"my":44},{"lx":171,"ly":41,"mx":172,"my":43},{"lx":170,"ly":40,"mx":171,"my":41},{"lx":170,"ly":39,"mx":170,"my":40},{"lx":169,"ly":39,"mx":170,"my":39},{"lx":169,"ly":38,"mx":169,"my":39},{"lx":170,"ly":38,"mx":169,"my":38},{"lx":173,"ly":39,"mx":170,"my":38},{"lx":176,"ly":39,"mx":173,"my":39},{"lx":178,"ly":39,"mx":176,"my":39},{"lx":181,"ly":39,"mx":178,"my":39},{"lx":184,"ly":39,"mx":181,"my":39},{"lx":185,"ly":39,"mx":184,"my":39},{"lx":186,"ly":38,"mx":185,"my":39},{"lx":187,"ly":37,"mx":186,"my":38},{"lx":188,"ly":36,"mx":187,"my":37},{"lx":188,"ly":35,"mx":188,"my":36},{"lx":188,"ly":34,"mx":188,"my":35},{"lx":189,"ly":36,"mx":188,"my":34},{"lx":191,"ly":38,"mx":189,"my":36},{"lx":193,"ly":41,"mx":191,"my":38},{"lx":194,"ly":42,"mx":193,"my":41},{"lx":196,"ly":43,"mx":194,"my":42},{"lx":197,"ly":44,"mx":196,"my":43},{"lx":197,"ly":45,"mx":197,"my":44},{"lx":197,"ly":46,"mx":197,"my":45},{"lx":195,"ly":46,"mx":197,"my":46},{"lx":194,"ly":46,"mx":195,"my":46},{"lx":193,"ly":46,"mx":194,"my":46},{"lx":194,"ly":46,"mx":193,"my":46},{"lx":195,"ly":46,"mx":194,"my":46},{"lx":197,"ly":46,"mx":195,"my":46},{"lx":198,"ly":46,"mx":197,"my":46},{"lx":199,"ly":46,"mx":198,"my":46},{"lx":199,"ly":45,"mx":199,"my":46},{"lx":219,"ly":21,"mx":219,"my":20},{"lx":220,"ly":21,"mx":219,"my":21},{"lx":220,"ly":22,"mx":220,"my":21},{"lx":220,"ly":24,"mx":220,"my":22},{"lx":220,"ly":25,"mx":220,"my":24},{"lx":220,"ly":27,"mx":220,"my":25},{"lx":220,"ly":28,"mx":220,"my":27},{"lx":219,"ly":29,"mx":220,"my":28},{"lx":218,"ly":30,"mx":219,"my":29},{"lx":217,"ly":31,"mx":218,"my":30},{"lx":214,"ly":31,"mx":217,"my":31},{"lx":212,"ly":31,"mx":214,"my":31},{"lx":211,"ly":31,"mx":212,"my":31},{"lx":208,"ly":30,"mx":211,"my":31},{"lx":206,"ly":29,"mx":208,"my":30},{"lx":205,"ly":27,"mx":206,"my":29},{"lx":202,"ly":24,"mx":205,"my":27},{"lx":202,"ly":22,"mx":202,"my":24},{"lx":202,"ly":21,"mx":202,"my":22},{"lx":202,"ly":20,"mx":202,"my":21},{"lx":202,"ly":18,"mx":202,"my":20},{"lx":202,"ly":17,"mx":202,"my":18},{"lx":204,"ly":16,"mx":202,"my":17},{"lx":207,"ly":16,"mx":204,"my":16},{"lx":209,"ly":16,"mx":207,"my":16},{"lx":210,"ly":16,"mx":209,"my":16},{"lx":213,"ly":16,"mx":210,"my":16},{"lx":216,"ly":16,"mx":213,"my":16},{"lx":218,"ly":16,"mx":216,"my":16},{"lx":221,"ly":16,"mx":218,"my":16},{"lx":224,"ly":16,"mx":221,"my":16},{"lx":226,"ly":17,"mx":224,"my":16},{"lx":227,"ly":17,"mx":226,"my":17},{"lx":229,"ly":17,"mx":227,"my":17},{"lx":230,"ly":17,"mx":229,"my":17},{"lx":231,"ly":19,"mx":230,"my":17},{"lx":232,"ly":20,"mx":231,"my":19},{"lx":233,"ly":22,"mx":232,"my":20},{"lx":233,"ly":24,"mx":233,"my":22},{"lx":233,"ly":27,"mx":233,"my":24},{"lx":234,"ly":33,"mx":233,"my":27},{"lx":234,"ly":36,"mx":234,"my":33},{"lx":234,"ly":41,"mx":234,"my":36},{"lx":234,"ly":44,"mx":234,"my":41},{"lx":234,"ly":46,"mx":234,"my":44},{"lx":234,"ly":47,"mx":234,"my":46},{"lx":240,"ly":45,"mx":240,"my":44},{"lx":242,"ly":44,"mx":240,"my":45},{"lx":243,"ly":44,"mx":242,"my":44},{"lx":246,"ly":44,"mx":243,"my":44},{"lx":248,"ly":43,"mx":246,"my":44},{"lx":250,"ly":42,"mx":248,"my":43},{"lx":251,"ly":42,"mx":250,"my":42},{"lx":253,"ly":40,"mx":251,"my":42},{"lx":255,"ly":39,"mx":253,"my":40},{"lx":255,"ly":38,"mx":255,"my":39},{"lx":255,"ly":36,"mx":255,"my":38},{"lx":255,"ly":35,"mx":255,"my":36},{"lx":255,"ly":34,"mx":255,"my":35},{"lx":255,"ly":33,"mx":255,"my":34},{"lx":255,"ly":32,"mx":255,"my":33},{"lx":255,"ly":31,"mx":255,"my":32},{"lx":254,"ly":31,"mx":255,"my":31},{"lx":253,"ly":31,"mx":254,"my":31},{"lx":252,"ly":32,"mx":253,"my":31},{"lx":252,"ly":34,"mx":252,"my":32},{"lx":252,"ly":36,"mx":252,"my":34},{"lx":252,"ly":37,"mx":252,"my":36},{"lx":252,"ly":38,"mx":252,"my":37},{"lx":252,"ly":40,"mx":252,"my":38},{"lx":253,"ly":41,"mx":252,"my":40},{"lx":255,"ly":43,"mx":253,"my":41},{"lx":256,"ly":44,"mx":255,"my":43},{"lx":260,"ly":45,"mx":256,"my":44},{"lx":263,"ly":46,"mx":260,"my":45},{"lx":265,"ly":46,"mx":263,"my":46},{"lx":268,"ly":46,"mx":265,"my":46},{"lx":271,"ly":46,"mx":268,"my":46},{"lx":273,"ly":45,"mx":271,"my":46},{"lx":274,"ly":44,"mx":273,"my":45},{"lx":275,"ly":42,"mx":274,"my":44},{"lx":276,"ly":40,"mx":275,"my":42},{"lx":277,"ly":39,"mx":276,"my":40},{"lx":278,"ly":37,"mx":277,"my":39},{"lx":278,"ly":34,"mx":278,"my":37},{"lx":279,"ly":33,"mx":278,"my":34},{"lx":280,"ly":32,"mx":279,"my":33},{"lx":281,"ly":31,"mx":280,"my":32},{"lx":282,"ly":31,"mx":281,"my":31},{"lx":283,"ly":32,"mx":282,"my":31},{"lx":285,"ly":34,"mx":283,"my":32},{"lx":288,"ly":36,"mx":285,"my":34},{"lx":291,"ly":40,"mx":288,"my":36},{"lx":293,"ly":42,"mx":291,"my":40},{"lx":294,"ly":43,"mx":293,"my":42},{"lx":295,"ly":44,"mx":294,"my":43},{"lx":295,"ly":45,"mx":295,"my":44},{"lx":295,"ly":46,"mx":295,"my":45},{"lx":294,"ly":46,"mx":295,"my":46},{"lx":291,"ly":46,"mx":294,"my":46},{"lx":289,"ly":46,"mx":291,"my":46},{"lx":286,"ly":46,"mx":289,"my":46},{"lx":284,"ly":46,"mx":286,"my":46},{"lx":283,"ly":46,"mx":284,"my":46},{"lx":282,"ly":46,"mx":283,"my":46},{"lx":284,"ly":46,"mx":282,"my":46},{"lx":285,"ly":46,"mx":284,"my":46},{"lx":286,"ly":46,"mx":285,"my":46},{"lx":287,"ly":46,"mx":286,"my":46},{"lx":289,"ly":46,"mx":287,"my":46},{"lx":290,"ly":44,"mx":289,"my":46},{"lx":292,"ly":43,"mx":290,"my":44},{"lx":293,"ly":40,"mx":292,"my":43},{"lx":296,"ly":38,"mx":293,"my":40},{"lx":298,"ly":35,"mx":296,"my":38},{"lx":300,"ly":30,"mx":298,"my":35},{"lx":302,"ly":25,"mx":300,"my":30},{"lx":304,"ly":22,"mx":302,"my":25},{"lx":304,"ly":19,"mx":304,"my":22},{"lx":305,"ly":16,"mx":304,"my":19},{"lx":306,"ly":14,"mx":305,"my":16},{"lx":307,"ly":13,"mx":306,"my":14},{"lx":307,"ly":16,"mx":307,"my":13},{"lx":307,"ly":26,"mx":307,"my":16},{"lx":307,"ly":29,"mx":307,"my":26},{"lx":307,"ly":32,"mx":307,"my":29},{"lx":307,"ly":35,"mx":307,"my":32},{"lx":308,"ly":39,"mx":307,"my":35},{"lx":310,"ly":40,"mx":308,"my":39},{"lx":311,"ly":42,"mx":310,"my":40},{"lx":314,"ly":44,"mx":311,"my":42},{"lx":317,"ly":46,"mx":314,"my":44},{"lx":320,"ly":47,"mx":317,"my":46},{"lx":323,"ly":48,"mx":320,"my":47},{"lx":326,"ly":50,"mx":323,"my":48},{"lx":330,"ly":50,"mx":326,"my":50},{"lx":333,"ly":50,"mx":330,"my":50},{"lx":333,"ly":49,"mx":333,"my":50},{"lx":333,"ly":48,"mx":333,"my":49},{"lx":333,"ly":46,"mx":333,"my":48},{"lx":332,"ly":45,"mx":333,"my":46},{"lx":332,"ly":44,"mx":332,"my":45},{"lx":294,"ly":29,"mx":294,"my":28},{"lx":295,"ly":28,"mx":294,"my":29},{"lx":296,"ly":28,"mx":295,"my":28},{"lx":299,"ly":28,"mx":296,"my":28},{"lx":302,"ly":28,"mx":299,"my":28},{"lx":307,"ly":28,"mx":302,"my":28},{"lx":312,"ly":28,"mx":307,"my":28},{"lx":317,"ly":28,"mx":312,"my":28},{"lx":320,"ly":28,"mx":317,"my":28},{"lx":322,"ly":26,"mx":320,"my":28},{"lx":322,"ly":25,"mx":322,"my":26},{"lx":323,"ly":25,"mx":322,"my":25},{"lx":324,"ly":25,"mx":323,"my":25}]

I am using this in an app where I'd like the form to auto-save whenever something changes. it would be great to have an optional "onChange" event which can be over-ridden.

Hi Bradley,

I'm getting it all wrong...I followed all the steps, somehow I cannot get it to work. I mean the "signature-to-image.php" saves the "signature.png" file but it saves an empty image, just the canvas.

Also I get the following error message, so I'm guessing it has to do with getting that error sorted out then it will work.

"Warning: Invalid argument supplied for foreach() in /data/21/2/10/22/9802851/user/87685857/htdocs//sigpad/signature-to-image.php on line 51"

Thanks for the help. Oh...by the way Signature Pad's awesome!

Hi,

I am trying to implement your code to capture signatures through a Genius Pad.

I have the javascript code to make the canvas to look bigger/smaller on a key press/up (e.g. esc key)

Now the thing is, if the canvas is resized, the pen pointer/mouse seem to be misplaced. For example if your pointer is at the middle of the screen, the actual drawing will start 100 pixels to the right of the pointer.

I suspect this has something to do with the scaling. However I have no idea on how to scale it. If you could point me to a direction, it would be great. Thanks

Cheers,

I've found that I if I type enough characters to cause the canvas to compress the typed signature to fit the space, and then I delete a bunch of them, the remaining characters remain shrunken. They don't stretch back up to their original font size. I can probably figure out a workaround, and I haven't tested this in other browsers but I wanted to let you know. Thanks again for your work!

Chrome 21.0, Mac OSX 10.5

Hello, and first of all, thank you so much for your plugin. I started integrating it into my app and I think it's great! I have a couple of issues with it that I didn't see mentioned in the docs or in the issues here.

The first one is that when I create a typed signature and save it to the server, everything is great. However, when I go back to edit the signature in my edit page (I'm using Ruby on Rails), then the text that I saved to the server database shows up correctly in the text input box for a typed signature. However, the canvas does not display the text until I click anywhere the page. This is probably a canvas quirk, but it seems to need a nudge before it refreshes the data. I'm going to look into the source to see if I can find where to give it that nudge but I wanted to ask you this to see if you knew how to deal with this issue. I'm using chrome 21.0 on Mac OS X 10.5 (yes, I know it's old, I'll upgrade as soon as get through my work push!).

I'll open a new issue for the other issue I found.
Thanks again!
Matt

I would expect calling updateOptions({displayOnly: false}) to enable drawing on a signature pad previously configured not to enable drawing. Currently, nothing happens. I tried calling signaturePad({displayOnly: false}) on the jQuery selector instead, and got the same result. Once the signature pad is initialized as displayOnly, drawing can't be re-enabled.

Hi,

We are using signature pad in one of project but we are not able to make the canvas bigger. To do this we are change the css:

.sigPad -> width: 450px;
.sigPad input -> width: 450px;

We also changed the canvas size:

I tried in as wel IE9, as Chrome, as FireFox but it keeps returning json of the truncated image (ca 198 px).

Many thanks,
Jeroen

First of all, thanks for this fantastic plugin. It's easy to use and implement.

I am trying to customize the size of the image produced. Rather than 198 x 55 I'd like to get closer to 250 x 75. I was able to change the canvas dimensions, css, and line top to make it look bigger and provide more canvas area to sign, but the final image was being cropped down to the same 198 x 55.

This may be something I am doing wrong but the lack of documentation in this area means I couldn't check my settings. Could you provide an example of this including a final image that is a custom size so that people like me can figure out what we might be missing?

Hi,

First of all well done for a great job.
Is it possible to modify the code internally that it looks for the

tags and

After every update, I change the declaration of getSignatureImage like so:

,getSignatureImage: function() { return element.toDataURL.apply(element, arguments) }

This means I use getSignatureImage('image/jpeg') if I want JPEGs instead of everything being PNGs. This is still broken on certain Androids, but no more broken than it was before (I think).

It would be terrific if you incorporated this in the next update, as it is completely backwards-compatible.

Hi Thomas,
I've tried the signature-pad and am very glad. I've create a form with a signature and is functioning as it should be. I've create a print to PDF function for this form but have no clue how to include the signature in the PDF. Is there any documentation on how to print the signature to PDF?

Your help is much appreciated.

Thanks.
Thomas

when i'm using signature pad in regular link (http) everything works fine, when i enter in secured link (https)
it doesn't show

please help!

Sorry for raising all these issues, I hope they are legitimate at least.

My app wants to give users the choice to use a drawn or typed signature, but switching between the two deletes the drawn signature. That signature can be hard to draw with a mouse and it's sure to irritate users if they have to recreate it manually after just clicking over to see what a typed signature might look like.

However, I couldn't find a setting to disable that behavior. I tried catching the mouse click event on the .typeIt link when users switch to typing, but the drawn signature data is already removed at that point. I was unable to get my click handler in front of the signature pad's internal click handler before the data was removed. I'm still browsing the code, but if you point me to the right place to override this behavior, I can make a patch that contains an option to do so. Thanks!

Matt

Good morning!
I have a roblem. Don' t work updateOptions with displayOnly.
This is my code: http://www.mediafire.com/?gmjqwcjbzg0q510
Thank you!

Hi, I'm trying to save a generated sig using signature-to-image.php, but this only works in Draw-Mode. The hidden .output field is not filled in Type-Mode, so no data is sent when sending the form. Is this by design? Any way to fix this?

Is it possible to turn an element other than a form into a signature pad? How about a form within a form?

Hi,

I tried resizing the canvas through CSS. And when i try signing on the canvas, the line shows up at an offset distance. Not at the point where my pen tip is positioned.
Lets say that i have added an inline width to the canvas as 200px. and if i reduce the size of the canvas through CSS to 100px, then i face this issue. Is it that i need to make the change to size through the inline HTML. I would prefer to make this change through CSS.

Thanks,
Hari

There are some minor issues with signature-pad's click events, and what happens when the mouse goes outside the canvas.

1. If you drag the mouse out of the canvas quickly, it sometimes won't draw the final stroke (from the starting-point to where the mouse leaves the canvas).
2. If you drag the mouse out and then drag it back in, it will draw a straight line from the cursor's last exit point to the new entry point, adding a line we literally didn't draw.
3. If you drag the mouse out and release the mouse button (still outside the canvas), moving the cursor over the canvas again will start drawing although the mouse is not being clicked.
4. If you drag the mouse out of the canvas at all in Chrome, it starts highlighting text.

The first three scenarios only apply if you don't linger outside, because mouseLeaveTimeout ends any drawing when triggered.

A bit of extra coding solve both these problems. Namely:

A. Add an optional parameter (e) to stopDrawing that draws one last dot (at the event mouse cursor location) before stopping the draw.
B. mouseleave always calls stopDrawing(e) to send the last known mouse position
[These 2 changes solve problem 1]
C. If stopDrawing is passed an event from mouseleave, don't unbind the mousemove events like normal
D. mousemove detects if the drawing was stopped, and if so, begins a new line
[These 2 changes solve problem 2]
E. Use $(document) instead of canvas for all mouseup event bindings.
F. Create private boolean variable mouseButtonDown that is set to 'true' by mousedown events and 'false' by mouseup/mousedowntimeout events.
G. Mouseup events won't run code unless mouseButtonDown is true.
[These 3 changes solve problem 3]
H. Add a 'noselect' class to signaturepad.css that disables text selection.
I. Add/remove the 'noselect' class on body whereever mouseButtonDown is set to true/false.
[These 2 changes solve problem 4]

Now that you know the "why", here's the actual code...

function SignaturePad (selector, options) {
...
  /**
* Whether the mouse button is currently pressed down or not
*
* @private
*
* @type {Boolean}
*/
  , mouseButtonDown = false
...

Notice the added e variable in this block. e is only passed by mouseleave, so this can draw a point at the last known mouse location and leave bindings alone.

  function stopDrawing (e) {
    if (!!e) {
      drawLine(e, 1)
    } else {
      if (touchable) {
        canvas.each(function () {
          this.removeEventListener('touchmove', drawLine)
        })
      } else {
        canvas.unbind('mousemove.signaturepad')
      }
    }
  ...

I've added this above startDrawing though it doesn't really matter where.

  /**
* Callback registered to mouse/touch events of the canvas
* Draws a line at the mouse cursor location, starting a new line if necessary
*
* @private
*
* @param {Object} e The event object
* @param {Object} o The object context registered to the event; canvas
*/
  function onMouseMove(e, o) {
    if (previous.x == null) { drawLine(e, 1) } else { drawLine(e, o) }
  }

Changed callbacks from drawLine to onMouseMove.

  function startDrawing (e, o) {
    if (touchable) {
      canvas.each(function () {
        this.addEventListener('touchmove', onMouseMove, false)
      })
    } else {
      canvas.bind('mousemove.signaturepad', onMouseMove)
    }
  ...

Time to update more mouseup/down/leave bindings.

  function disableCanvas () {
    ...
    $(document).unbind('mouseup.signaturepad')
    ...

  function initDrawEvents (e) {
  ...
      $(document).bind('mouseup.signaturepad', function (e) {
        if (mouseButtonDown) {
          mouseButtonDown = false
          $('body').removeClass('noselect')
          stopDrawing()
        }
      })
      canvas.bind('mouseleave.signaturepad', function (e) {
        stopDrawing(e)
        if (!mouseLeaveTimeout) {
          mouseLeaveTimeout = setTimeout(function () {
            stopDrawing()
            clearTimeout(mouseLeaveTimeout)
            mouseLeaveTimeout = false
            mouseButtonDown = false
            $('body').removeClass('noselect')
          }, 500)
        }
      })
  ...

  function drawIt () {
  ...
    canvas.bind('mousedown.signaturepad', function (e) {
      mouseButtonDown = true
      $('body').addClass('noselect')
      initDrawEvents(e)
      startDrawing(e, this)
    })
  ...

But I only wrote this today and this really needs more (multi-browser) testing. Hope this helps!

If I simply wave my mouse across the canvas without mousing down then the value is set to an empty array.

In this part of your sample:

    <div class="sig sigWrapper">
        <div class="typed"></div>
        <canvas class="pad" width="248" height="55"></canvas>
        <input type="hidden" name="output" class="output">
    </div>
    <button class="nontouch" type="submit">I received this collection.</button>

1. If you change the height to something like "85", note that the button is now partially overwritten.
2. If you change the width to "248", note that the bordered box is now incomplete

1.) setup demo (google chrome, latest)
2.) var pad = $('.sigPad').signaturePad({ bgColour: 'transparent' });
3.) draw signature
4.) pad.clearCanvas()
5.) observe how signature remains (expected: signature cleared)

The signature clears just fine if bgColour is is '#fff' or any other hex value. Would love for it to work with transparency so that you can style custom backgrounds.

when the sig pad not show in the screen when page loaded on IE10, the pad not work, can not draw anything on it.

sample code:

<div style="padding-top:700px">
[signature pad code]
</div>

scroll page down, then can not draw on it.

hi guys,
thanks for sharing this app, i really like it.
only one strange thing happens: as long as i have the in my file, the pad won't show up. If i just remove it (nothing else need to be changed) everything works fine.
did i miss anything? any clues?

thanks,
horndash

How can we get canvas to make more coordinates per signature? Can we adjust it to increase for more powerful client js vms?

I have a crazy large form, and I am currently noticing some latency.

I am currently trying to optimise my use of signaturePad to try and lower the latency.

My current options are:
drawOnly: true,
validateFields: false,
lineWidth: 0,
sig: '.signaturePad',
output: '',
sigNav: '',
name: '',
typed: '',
clear: '',
typeIt: '',
drawIt: '',
typeItDesc: '',
drawItDesc: ''

It would be terrific if signaturePad were programmed such that empty selectors (or some other flag) prevented certain tasks from being executed at all, for performance reasons.

For example, I have settings.output = '', so the JSON will never be recorded on the DOM. However, the JSON will still be created anyway. It would be awesome if values (etc) were only calculated if the settings suggested that the results were actually desired.

I am newish to jquery, etc and I have been trying for hours, but how do I use the getSignatureImage function? I cannot find anything anywhere on how to really use this correctly and nothing I do seems to work.

This is what I have now, but I know it is wrong. (the sig value is just an example for now)

                    $(document).ready(function() {
                    var sig = {lx:20,ly:34,mx:20,my:34}

                    var api = $('.sigPad').signaturePad({displayOnly:true})
                    api.getSignatureImage()
                    });

How do I get my signature to regenerate into the getSignatureImage? It would be great if this was documented on your site. I just am not really clear on how to use it.. am I supposed to be able to save the image somehow, or is it returning the image as to the browser?

The reason is because I am using a HTML to PDF component and it does not display the canvas. But will display an image.

I was able to reproduce this when signing and accidentally dragging the cursor outside of the drawing box. The cursor then defaults to text reticle instead of the blue signing dot until the browser is reloaded.

The base64 encoded string that i get seems not encoded correctly.I use the following code:

$('form.sigPad').submit(function (ev) {
$('input[name="output"]').val(api.getSignatureImage());
});

I get an empty image (with no content in it), but it occupies space.

My requirement is, I want to sign in the canvas element and submit the form. Then get the base64 encoded string of canvas (with signed one) and convert the base64 to image.
Please help me in this. I would be great if anyone can share some samples.

Bug Description - When the Signature Pad is displayed and the user selects "Sign It" then selects "Type It" normally the signature pad will not allow drawing. However, on the iPad the user can continue to draw on the signature pad over the typed letters.

This is what I did to get it to work correctly

/**

• Removes all the mouse events from the canvas
  *

• @Private
  */
  function disableCanvas () {
  eventsBound = false

  if (touchable) {
  canvas.each(function () {
  this.removeEventListener('touchstart', stopDrawing);
  this.removeEventListener('touchend', stopDrawing);
  this.removeEventListener('touchmove', drawLine);
  //////////////////////////////////////
  //added to properly stop the on touch start listener
  this.ontouchstart = null;
  ///////////////////////////////////////
  })
  } else {
  canvas.unbind('mousedown.signaturepad')
  canvas.unbind('mouseup.signaturepad')
  canvas.unbind('mousemove.signaturepad')
  canvas.unbind('mouseleave.signaturepad')
  }

  $(settings.clear, context).unbind('click.signaturepad')
  }

When integrating sigPad in to a jQueryMobile 1.0 site, the button theming of sigPad interferes with the jQueryMobile button rendering.

In your example, I modified it to this, and applied the css changes below to the main sigpad css file and everything looks great.

    <button class="nontouch" type="submit">I received this collection.</button>

.sigPad button.touch {
margin: 1em 0 0 0;
padding: 0.6em 0.6em 0.7em;

background-color: #f0e2eb;
border: 0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

cursor: pointer;

color: #ea088c;
font: bold 1em/1.375 "Helvetica Neue",Helvetica,Arial,sans-serif;
text-align: left;
}

.sigPad button.touch {
margin: 1em 0 0 0;
padding: 0.6em 0.6em 0.7em;
border: 0;
}

I'm wondering if it is possible to regenerate multiple signatures on a single page. I looked through the docs but didn't see a way to do this.

We have a master service agreement that has the user's signature stored multiple times in a database as JSON, and just need to be able to regen the signatures.

Thanks!

~ Rob

After switching a lot of our onclick's for ontouchstart's to deal with the slowness of clicks on iOS, we found that if another event intercepted the ontouchstart, onclick events can flowthrough to the signature canvas without initialising the correct events in the canvas.

This is caused by the first event that gets sent to initDrawEvents() not being an ontouchstart, but an onclick instead, and thus the e.changedTouches property is undefined. Since the function is effectively a singleton, the correct events are never init'd and the signature box only responds to make single dots.

A solution is to replace the line
if (typeof e.changedTouches !== 'undefined')
with
if (typeof window.ontouchstart !== 'undefined')

When I call the plugin method "$('.sigPad').signaturePad(options)" on the HTML element it also returns and API for the instance, so we can assign it to some global variable
var sigPad = $('.sigPad').signaturePad(options);

Is it possible to change the method signaturePad(options) so it will return the current instance (or create a new instance if it was not done previously)?
For example:
var img = $('.sigPad').signaturePad().getSignatureImage();

at present it creates a new instance and returns empty image. I have to use a global variable to solve it

Also regarding option.lineTop. IMHO it's better to use it as %.
function drawSigLine() {
...
canvasContext.moveTo(settings.lineMargin, element.height * settings.lineTop * 0.01)
...
}

Thanks.

Hello,

I changed the size attributes in the css and html for the canvas, sigPad, and sigWrapper.

Once the user hits submit, I send the form to the server and run it thru the signature to image script. However, this is not working. It generates the an image just fine, but it is an limited view of the canvas. Any ideas? Thank you!

I am using the signature pad in an app I am creating. The signature pad works great on all phones if I do not change the size of it. The problem occurs when I change the size of signature pad. I followed the steps listed here to make the necessary changes to modify the size (http://thomasjbradley.ca/lab/signature-pad/#resize), and it still does not work. It doubles when you start to write the signature. I have two pictures, one picture of when the page loads, and one after I attempt to write something in the pad. It works fine on the browser, on apple products, and even older android devices, but for some reason, it gets messed up on the new Galaxy Note 2.

How can I clear the signature from a JavaScript function?

Hi,

I want to make the signature pad a little bit bigger. I changed the width/height of the canvas, then I changed the CSS width/height. The size of the pad grows, but when i goto sign my name, I can only use like half of the canvas vertical instead of the whole things. Any idea on how I can make this work.

Thanks

or is it not supposed to work? it would be useful to be able to obtain the drawn font of what's typed

Unnecessary execution of jQuery selectors can be avoided by running them all once during initialisation and merely using the cached results.

This is already being performed for the "canvas" selector. It would be terrific if all the other selectors were also cached.

I admit, however, that this may break code that requires the selectors to be executed over and over again, such as pages that insert content post-initialisation that needs to be used by signaturePad. I would suggest, however, that these use cases are probably sub-optimal themselves.

Hi,
I can't regenerate signature without this option :
displayOnly:true

A workaround is to set regenerate in a setTimeout function, but it's only work on Google Chrome, not in FF nor IE.

Currently, several signaturePad settings are documented to be strings that will be used later in jQuery selectors.

It would be advantageous to allow pre-executed jQuery selectors (ie jQuery Objects) and even DOM Elements to be passed in instead of these selector strings. This would hopefully skip executing jQuery selectors unnecessarily.

I don't think any code changes are necessary for this to work, however it would mean changes to documentation, and a commitment to continue to not do anything string-specific to the settings involved.

Hello, I need some help

I'm using Signature-Pad in a Form with 2 Radio Buttons for selecting the payment method: CreditCard and Electronic Check with Signature pad.
How can I validate Signature Pad value only when it was selected "Electronic Check"?

Or is there any way to destroy the plugin?

I tryied smth like that but its not working.

$(".payment-chek").click(function () {
if($(this).closest("table").parent().hasClass("altcharge_processing")) {
$(".sigPad").signaturePad({drawOnly:true});
} else {
$.fn.signaturePad.validateFields = false;
}
});

Hi,

I am using Java at the server level and am trying to use the getSignatureImage() to capture the Base 64. The problem is the decoded output does not seems to be correct. The image comes out as pure white with no content in it. Below is the code I am using. Please let me know how to correct it.

If someone can let me know how to use Java to parse the JSON image object that also will solve my problem.

Java:

String png = pRequest.getParameter("output").substring(pRequest.getParameter("output").indexOf(",") + 1);

    BASE64Decoder decoder = new BASE64Decoder();
    byte[] data = null;

    try{
            data = Base64.decode(png );
            pResponse.setContentType("image/png");
            pResponse.setHeader("Cache-Control","private"); //HTTP 1.1
            pResponse.setHeader("Pragma", ""); //HTTP 1.0
            pResponse.addHeader("Content-disposition", "attachment; filename=img.png");
            pResponse.addHeader("Content-disposition", "attachment; filename=img.png");
            ServletOutputStream out = pResponse.getOutputStream();
            out.write(data);
            out.flush();
            out.close();
    }
    catch(Exception  e){
    e.printStackTrace();
    }

I'm using a Samsung Galaxy S2 running Gingerbread.
I'm using the stock browser.

When the signature pad has to be scrolled to be viewed, and I start to sign, it quickly disappear and reappear quickly. Despite this bug, the signature pad still works and the signature output is fine.

This bug only happens when there`s other content on the page and that you have to scroll down or right to sign. It works perfectly fine when the signature pad is the only object in the page.

Thanks.

When using SignaturePad in the browser of the blackberry playbook the page flickers up and down as you draw on the canvas.

The problem is calculateTouchZoomDiff is scrolling the page up and down to account for an ipad bug.
I was able to fix the problem by adding a check in calculateTouchZoomDiff to return if the useragent isn't an iOS device:

    function calculateTouchZoomDiff(o)
    {
        if(!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))) {

            return {
                'top':  0
                ,'left': 0
            }
        }
    ...
    }

Something like this might be a better solution:
https://gist.github.com/431639

Having great fun playing with the code, thanks.

Wondered if it was possible to resize the regenerated signature? (I am using a mysql database to store the signature)

I have resized the canvas on the accept.php and the relevant css to get the signing panel bigger but would like the regenerated signature to display smaller.

Pointers appreciated.

After every update, I change the drawSigLine function like so:

function drawSigLine() {
if (!settings.lineWidth) { return; }
...
}

That way, I can set the lineWidth to 0 (or false) and turn off the signature line. If you think other people would like to control the presence of the signature line in this way, then it might be a good idea to throw this in.

For my use case (disabled signature line) this is more efficient than picking a transparent colour (or colour that matches the background). It does end up in one more conditional check for everyone who does want the signature line though...