Var decodedImage = Convert.FromBase64String(encodedImage) Here's an example in C# for ASP.NET: var dataUri = 'data:image/png base64,iVBORw0K.' $decoded_image = base64_decode( $encoded_image) įile_put_contents( 'signature.png', $decoded_image) $encoded_image = explode( ',', $data_uri) Here's an example in PHP: $data_uri = 'data:image/png base64,iVBORw0K.' SignaturePad.toDataURL( 'image/svg+xml') // save image as SVG data url // Return svg string without converting to base64 SignaturePad.toDataURL( 'image/jpeg', 0.5) // save image as JPEG with 0.5 image quality SignaturePad.toDataURL( 'image/jpeg') // save image as JPEG SignaturePad.toDataURL() // save image as PNG Returns signature image as data URL (see for the list of possible parameters) Usage API const canvas = document.querySelector( 'canvas') Ĭonst signaturePad = new SignaturePad(canvas) This library is provided as UMD (Universal Module Definition) and ES6 module.

You can also add it directly to your page using tag: You can install the latest release using npm: npm install -save signature_pad You can also find more about the latter in HTML5 Rocks tutorial. You can check out its source code for some tips on how to handle window resize and high DPI screens.

It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.ĭemo works in desktop and mobile browsers. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. Signature Pad is a JavaScript library for drawing smooth signatures.

Html5 signature pad