To process this functionality using jQuery Signature Pad with saving As Image Using html2canvas, we follow below major steps,
- Include Signature pad, Bezier, and jQuery CDN
- Include html2canvas JS library
- Create an HTML Canvas
- By using
signaturePad()function draw Signature - Create a blank image tag to show the generated image.
- Using jQuery get the Canvas data.
At last you can get complete source code and also a download link.
Complete Step by Step Process to Create a Sign Pad and Save as Image Using html2canvas
Step-1: Include Signature pad, Bezier, and jQuery CDN
Here we include necessary CDN links and libraries.
|
1 2 3 4 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script> <script src="bezier.js"></script> <script src="jquery.signaturepad.js"></script> |
Note:
You can get all other without CDN link JS files are on download link.
Step-2: Include html2canvas JS library
|
1 |
<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> |
Step-3: Create an HTML Canvas
|
1 2 3 4 5 6 |
<div id="signatureArea" > <div style="height:auto;"> <canvas id="signaturePad" width="300" height="100"></canvas> </div> </div> <button id="btnSaveSignature">Save Signature</button> |
Here we create an HTML Canvas and the main DIV with #signatureArea ID attribute that is used to draw user input signature.
Step-4: By using signaturePad() function draw Signature
|
1 2 3 |
$(document).ready(function() { $('#signatureArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90}); }); |
Here we use a signature pad predefined function to draw a signature, and drawBezierCurves:true is used to draw smooth lines and curves.
Step-5: Using jQuery get the Canvas data
|
1 2 3 4 5 6 7 8 9 10 |
$("#btnSaveSignature").click(function(e){ html2canvas([document.getElementById('signaturePad')], { onrendered: function (canvas) { var canvas_img_data = canvas.toDataURL('image/png'); var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, ""); console.log(img_data); document.getElementById("canvasImage").src="data:image/gif;base64,"+img_data; } }); }); |
Code Explanations:
Here we take signature pad data by using ID attribute into the html2canvas() than we render the image and converted image to base64 encoded image.
Complete Example Source Code To Create jQuery Signature Pad & Save as image Using html2canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Signature Pad with saving As Image Using html2canvas</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script> <script src="bezier.js"></script> <script src="jquery.signaturepad.js"></script> <script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> </head> <body> <div id="signatureArea" > <div style="height:auto;"> <canvas id="signaturePad" width="300" height="100"></canvas> </div> </div> <button id="btnSaveSignature">Save Signature</button> <script> $(document).ready(function() { $('#signatureArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90}); }); $("#btnSaveSignature").click(function(e){ html2canvas([document.getElementById('signaturePad')], { onrendered: function (canvas) { var canvas_img_data = canvas.toDataURL('image/png'); var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, ""); console.log(img_data); document.getElementById("canvasImage").src="data:image/gif;base64,"+img_data; } }); }); </script> <p>Signature Image</p> <img id="canvasImage" /> </body> </html> |
To know more about canvas drawing you can follow the w3schools link, https://www.w3schools.com/graphics/canvas_drawing.asp
If you want to started design with experts check here https://www.prima-line.de/
Download Link to jQuery Signature Pad with saving As Image Using html2canvas:
Also Check:
- Get List of Holidays Using Google Calendar API
- Check Duplicate Values in Foreach PHP
- Allow Only String and Numbers Using PHP
- Migrate WordPress Site To New Host Manually
Happy Coding..!
How JavaScript For Loop Works (Complete Guide With Example) 
Hello,
I like you code.Complete Example Source Code To Create jQuery Signature Pad & Save as image Using html2canvas
in this code how can I implement clear Signature,can you help?