jQuery Signature Pad with saving As Image Using html2canvas

To process this functionality using jQuery Signature Pad with saving As Image Using html2canvas, we follow the below significant steps,

Include Signature pad, Bezier, and jQuery CDN
Include the 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 the complete source code and also a download link.

jQuery Signature Pad with saving As Image Using html2canvas

Complete Step by Step Process to Create a Sign Pad and Save as an Image Using html2canvas

Step-1: Include Signature pad, Bezier, and jQuery CDN

Here we include necessary CDN links and libraries.

<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 others without CDN link JS files on the download link.

Step-2: Include html2canvas JS library

<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

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

<div id="signatureArea" >
   <div style="height:auto;">
       <canvas id="signaturePad" width="300" height="100"></canvas>
   </div>
</div>        
<button id="btnSaveSignature">Save Signature</button>

</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

$(document).ready(function() {
   $('#signatureArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
});

$(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

$("#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;
        }
    });
});

$("#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 the ID attribute into the html2canvas() then we render the image and convert image to a base64 encoded image.

Complete Example Source Code To Create jQuery Signature Pad & Save as image Using html2canvas

<!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>

<!DOCTYPE html>

<html>

<head>

<title>jQuery Signature Pad with saving As Image Using html2canvas</title>

</head>

<body>

</div>

<button id="btnSaveSignature">Save Signature</button>

$(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>

</body>

</html>

To know more about canvas drawing you can follow the w3schools link, https://www.w3schools.com/graphics/canvas_drawing.asp

Download the Link to jQuery Signature Pad by saving it As an Image Using html2canvas:

https://codingtasks.net/download/complete-example-source-code-to-create-jquery-signature-pad-save-as-image-using-html2canvas/

Also Check:

Happy Coding..!

Was this article helpful?

YesNo

7 thoughts on “jQuery Signature Pad with saving As Image Using html2canvas”

jQuery Text Changed Event For Textbox with Example- PHPCODER.TECH says:

April 5, 2021 at 12:43 pm

[…] jQuery Signature Pad with saving As Image Using html2canvas […]

How Does JavaScript Filter Function work (Complete Guide With Example) says:

April 7, 2021 at 11:38 pm

[…] jQuery Signature Pad with saving As Image Using html2canvas […]

Best Way to Download Video From YouTube - PHPCODER.TECH says:

May 10, 2021 at 10:36 pm

[…] jQuery Signature Pad with saving As Image Using html2canvas […]

Detailed Article About JavaScript else if Statement - PHPCODER.TECH says:

August 15, 2021 at 11:22 pm

[…] Also Read: jQuery Signature Pad with saving As Image Using html2canvas […]

How Does JavaScript Array Filter work With Example - PHPCODER.TECH says:

August 21, 2021 at 3:58 pm

[…] jQuery Signature Pad with saving As Image Using html2canvas […]

Anirban Ghosh says:

September 6, 2021 at 6:48 pm

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?

jQuery MultiSelect Dropdown Checkbox With Search - PHPCODER.TECH says:

December 1, 2022 at 12:15 am

[…] Also Read: jQuery Signature Pad with saving As Image Using html2canvas […]

jQuery Signature Pad with saving As Image Using html2canvas

Complete Step by Step Process to Create a Sign Pad and Save as an Image Using html2canvas

Step-1: Include Signature pad, Bezier, and jQuery CDN

Step-2: Include html2canvas JS library

Step-3: Create an HTML Canvas

Step-4: By using `signaturePad()` function draw Signature

Step-5: Using jQuery get the Canvas data

Complete Example Source Code To Create jQuery Signature Pad & Save as image Using html2canvas

By Bikash

Related Post

7 thoughts on “jQuery Signature Pad with saving As Image Using html2canvas”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change

Complete Step by Step Process to Create a Sign Pad and Save as an Image Using html2canvas

Step-1: Include Signature pad, Bezier, and jQuery CDN

Step-2: Include html2canvas JS library

Step-3: Create an HTML Canvas

Step-4: By using signaturePad() function draw Signature

Step-5: Using jQuery get the Canvas data

Complete Example Source Code To Create jQuery Signature Pad & Save as image Using html2canvas

By Bikash

Related Post

7 thoughts on “jQuery Signature Pad with saving As Image Using html2canvas”

Leave a Reply Cancel reply

You Missed

Step-4: By using `signaturePad()` function draw Signature