search

michaeldzjap / react-signature-pad-wrapper

A React wrapper for signature pad
MIT License
199 stars 27 forks source link

Signature with browser Zoom In and Zoom out #46

Closed sankarkumar23 closed 2 years ago

sankarkumar23 commented 2 years ago

I've implemented the signaturepad on react hooks. Everything working fine with default browser zoom 100%. I zoomed in the browser(say 80%), sign the signature and saved it. When I click on refresh/reload the signature the signature size is increasing to as if was signed with 100% zoom. Would there be a way keep the signature as per the current browser's zoom in/out size. I tried redrawOnResize with true/false and also removing width & height.. but no difference.

<SignaturePad ref={signaturePadRef} width={500} height={200} redrawOnResize={false} />

Captured on browser with 80% zoom Signature

michaeldzjap commented 2 years ago

I don't think so. This package is merely a wrapper around signature pad. Hence, all signature related drawing is offloaded to it. Maybe it would be possible to use 

// Returns signature image as an array of point groups
const data = signaturePad.toData();

and scale the data points you get back by the appropriate zoom ratio and use

// Draws signature image from an array of point groups
signaturePad.fromData(data);

to redraw the scaled signature. I have no idea if this would work, but this is what I would try out initially anyway. It's not something I'd build into this package though, as I feel it falls beyond the scope of what this package should do.