brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
690 stars 529 forks source link

Save whole signature field #174

Open nuketownhf opened 4 years ago

nuketownhf commented 4 years ago

Hello, currently the signature pad is saving only the drawn signature, is it possible to get the whole canvas field as a signature?

that's how it is currently: https://i.imgur.com/5tdOjB3.png and I want it to look like: https://i.imgur.com/P7s2aYl.png

How can I achieve this?

thanks

brinley commented 4 years ago

Try setting the width and height of the canvas when initialising jsignature

nuketownhf commented 4 years ago

Hello, thanks for the quick response, if I change it to: $(document).ready(function() { $("#signature").jSignature({ color:"black", lineWidth:5, height:100, width: 100

  });
})

it will let my CANVAS where I draw the signature smaller as seen here https://i.imgur.com/sdrRqe0.png

but i want a margin in the signature(image) and not the canvas

brinley commented 4 years ago

I think you might need to resize the canvas before you save. You could export the data from jsignature and import into a hidden canvas instance then resize that hidden canvas

nuketownhf commented 4 years ago

Hello, I'll try to clarify it with an image: https://i.imgur.com/rcIP2bc.png so basically the black box is the box where I can draw the signature the blue box is the signature that I will get cropped exactly as seen in the image as base64-image. But what I need is the full GREEN box as image and not the raw signature as seen in the blue box. is this possible? thanks

nuketownhf commented 4 years ago

I mean somewhere in the javascript file its defined that the first pixel and the last pixel of the signature drawing should be taken

brinley commented 4 years ago

Does having a signature line help you tell the user to sign in the middle? Otherwise there's no way other than you resizing the signature just before you export the data

nuketownhf commented 4 years ago

by the way if I draw points at the corners the image result will look exactly how I want the image to be https://i.imgur.com/GFFYfBc.png

regarding resizing the signature before the export, how could I do that so it looks like the image above? thanks

brinley commented 4 years ago

What is your use case and why do you want to save with the padding?