Hello Everyone, In this tutorial, I am providing a step-by-step procedure to create a signature pad Lightning component that use to draw signature and save as image format in any object of Salesforce. In this Lightning component, we are using two js file. To implement this example you have to upload these js files as a static resource and then include both of this static resource in your Lightning Component. I also provide both JS file in this tutorial to download.

 After Completing this tutorial, you'll able to:
  • Create a Signature Pad Lightning Component.
So let's begin,

Resource: Download JS (after downloading please change file extension to ".js", otherwise it's not working)

Signature Pad

Login to your Salesforce Org. and open developer console.


 Step1: Go to File>New>Lightning Component and create a Lightning Component called Signature. Replace the following markup in the Lightning Component.

Signature.cmp
 <aura:component controller="SignatureHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    <center><span style="font-weight:bold;font-size:20px;margin-top:10px;">Signature Pad</span></center>
    <div id="signature-pad">    
        <canvas style="border:1px solid black;width:100%;height:100%;margin-top:10px;" id="divsign"></canvas>                               
        
        <div style="float:right;margin-right:16px;"><a href="#" style="text-decoration:none;" id="btnClear">Clear Signature</a></div>
    </div>
    <ltng:require scripts="/resource/SignaturePad,/resource/SignApp" /> 
    <br/>
    <center>
    <lightning:button variant="brand" label="Save" title="Save" onclick="{!c.SaveSignature}"/>                
    </center>
    <aura:if isTrue="{!v.Spinner}">
        <div aura:id="spinnerId" class="slds-spinner_container">
            <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
 </aura:component>
SignatureController.js
 ({
    SaveSignature:function(component,event,helper){
        var isblank=helper.isCanvasBlank(document.getElementById('divsign'));
        if(!isblank){            
            helper.saveSignature(component);
        }
        else{
            alert('Please Sign in the box');
        }
    },       
    showSpinner: function(component, event, helper) {        
        component.set("v.Spinner", true); 
    },
    
    hideSpinner : function(component,event,helper){        
        component.set("v.Spinner", false);
    },
 })
SignatureHelper.js 
 ({
 isCanvasBlank:function (canvas) {
        var blank = document.createElement('canvas');
        blank.width = canvas.width;
        blank.height = canvas.height;
        return canvas.toDataURL() == blank.toDataURL();
    },
    
    saveSignature:function(component){        
        var action = component.get("c.saveSign");
        var vSplit=document.getElementById("divsign").toDataURL().split(',')[1]; 
        //var vSplit=document.getElementById("divsign").toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");
        action.setParams({                                  
            base64Data:encodeURIComponent(vSplit),
            contentType:"image/png"
        });
        action.setCallback(this, function(e) {          
            if(e.getState()=='SUCCESS'){
               alert('Signature Saved Successfully!')
            }  
            else{
                alert(JSON.stringify(e.getError()));
            }
        });
        $A.enqueueAction(action); 
    },
 }) 
Step2: Go to File>New>Apex Class and create an apex controller called SignatureHandler. Replace the following code.

 SignatureHandler.apxc
 public class SignatureHandler {
    @AuraEnabled 
    public static void saveSign(String base64Data, String contentType) { 
        List<Account> lstAcc=[SELECT Id,Name FROM Account limit 1];        
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');        
        Attachment a = new Attachment();
        a.parentId = lstAcc[0].Id;
        a.Body = EncodingUtil.base64Decode(base64Data);        
        a.Name = 'Signature.png';
        a.ContentType = contentType;        
        insert a;        
    }
 }
Step3: Go to File>New>Lightning Application and create a Lightning Application called Preview. Replace the following markup in the Lightning Application.

Preview.app 
 <aura:application extends="force:slds">          
    <c:Signature/>
 </aura:application>
After that click on Preview button from Right Side Pallete.

Output:

 See also:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.