Digital E-Signature Pad is a jQuery module that exploits HTML5 canvas component and JavaScript to create an adaptable and smooth Signature Pad on your site page and application. The module additionally can record the attracted signature JSON for later recovery. Know that the jQuery module likewise requires Numeric JavaScript library and Bezier curve tool included.

Step 1: Include the required jQuery Signature Pad JS and CSS Style in the head section of your page.

Step 2: Setup for our signature pad area.

Step 3:  Assign the signaturePad() function with our signature Pad tag ID

Step 4: Add button and html2canvas function to save the drawn signature as the image to the relevant folder.

You can also download html2canvas.js.

Step 5Now we need to add style and signature pad area layout for the view page, and save it as app_style.css
Step 6: PHP Code to store your signatures data as image and save it as save_sign.php
Step 7: Code to preview saved signatures image on our page.
Final Signature page code:
Download   Demo

3 Replies to “Digital E-Signature pad with saving it as image using html2canvas and Ajax, PHP”

  1. how to clear the signature before save.

    i added this code but it not clear the signature

    var canvas = document.getElementById(“sign-pad”);
    var c = canvas.getContext(“2d”);

    c.clearRect(0, 0, canvas.width, canvas.height);

  2. I’m trying to make to persons sign on a webform. I tried to make two signature pads for them, put the script will only export one of them.
    Here’s a snippet of my code.

    $(document).ready(function() {
    $(“#signArea”).signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:170});
    });

    $(“#btnSaveSign”).click(function(e){
    html2canvas([document.getElementById(“sign-pad”)], {
    onrendered: function (canvas) {
    var canvas_img_data = canvas.toDataURL(“image/png”);
    var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, “”);
    //ajax call to save image inside folder
    $.ajax({
    url: “save_sign.php”,
    data: { img_data:img_data },
    type: “post”,
    dataType: “json”,
    });
    }
    });
    html2canvas([document.getElementById(“sign-pad2”)], {
    onrendered: function (canvas) {
    var canvas_img_data2 = canvas.toDataURL(“image/png”);
    var img_data2 = canvas_img_data2.replace(/^data:image\/(png|jpg);base64,/, “”);
    //ajax call to save image inside folder
    $.ajax({
    url: “save_sign.php”,
    data: { img_data2:img_data2 },
    type: “post”,
    dataType: “json”,
    });
    }
    });
    });
    $(“#btnClearSign”).click(function(e){
    $(‘#signArea’).signaturePad().clearCanvas ();
    });
    $(document).ready(function() {
    $(“#signArea2”).signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:170});
    });

    // $(“#btnSaveSign2”).click(function(e){
    // html2canvas([document.getElementById(“sign-pad2”)], {
    // onrendered: function (canvas) {
    // var canvas_img_data2 = canvas.toDataURL(“image/png”);
    // var img_data2 = canvas_img_data2.replace(/^data:image\/(png|jpg);base64,/, “”);
    // //ajax call to save image inside folder
    // $.ajax({
    // url: “save_sign.php”,
    // data: { img_data2:img_data2 },
    // type: “post”,
    // dataType: “json”,
    // });
    // }
    // });
    // });

    $(“#btnClearSign2”).click(function(e){
    $(‘#signArea2’).signaturePad().clearCanvas ();
    });

Leave a Reply

Your email address will not be published. Required fields are marked *