Capture signature in SFDC Using Canvas

Capture the e-signature in SFDC using Canvas.


Code:
VF Page:

<script>var $j = jQuery.noConflict();</script>
<apex:stylesheet value="{!URLFOR($Resource.jquerymobile,'/jquerymobile/jquery.mobile-1.3.2.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.Jquery)}"  />
<apex:includeScript value="{!URLFOR($Resource.jquerymobile,'/jquerymobile/jquery.mobile-1.3.2.min.js')}"/>

 <!-- <input id="saveSigButton" type="button" name="SigCap" onclick="saveSignature();"   value="Capture Signature"></input> -->
  <apex:form >
  <apex:actionStatus id="status" >
    <apex:facet name="start">
        <apex:outputPanel >
            Saving....
        </apex:outputPanel>
    </apex:facet>
    <apex:facet name="stop">
    <apex:outputPanel >
    <div align="center" >
    <apex:outputText value="Please Sign-In Below:"></apex:outputText><br></br>
<canvas id="signatureCanvas" height="300PX" width="600PX" style="border:1px solid #000000;text-align:center;"/><br></br>
        <apex:commandButton value="Save Signature"  onClick="this.disabled='disabled'; saveSignature();return false;" status="status"/>
        <apex:commandButton value="clear"  onclick="clearSignature();"  immediate="true"/>
        </div>
    </apex:outputPanel>
    </apex:facet>
 </apex:actionStatus>
 <!--  <apex:actionStatus id="status" >
  <apex:commandButton value="Save Signature" id="Save" onClick="saveSignature(); return false;"  status="status"/>
   <input id="clear" type="button" name="SigCap" onclick="clearSignature();"   value="Clear"></input>
   </apex:actionStatus> -->
  </apex:form>
 <script>
 var canvas;
    var context;
    var drawingUtil;
    var isDrawing = false;
    var accountId = '';

function DrawingUtil()
{
    isDrawing = false;
    canvas.addEventListener("touchstart",start,false);
    canvas.addEventListener("touchmove",draw,false);
    canvas.addEventListener("touchend",stop,false);
    context.strokeStyle = "#FFF"; 
}

//Start Event for Signature Captuare on HTML5 Canvas
function start(event)
{
    isDrawing = true;
    canvas = document.getElementById("signatureCanvas");
    context = canvas.getContext("2d");   
    context.strokeStyle = "rgba(155,0,0,0.5)";     
    context.beginPath();
     context.moveTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
}

//Event while someone is drawing to caputre the path while they draw....
function draw(event) {
    event.preventDefault();
    if(isDrawing) {    
        context.lineTo(event.touches[0].pageX - canvas.getBoundingClientRect().left,event.touches[0].pageY - canvas.getBoundingClientRect().top);
        context.stroke();
    }
}


//Event when someone stops drawing their signature line
function stop(event) {
    if(isDrawing) {
        context.stroke();
        context.closePath();
        isDrawing = false;
    }
}

canvas = document.getElementById("signatureCanvas");
context = canvas.getContext("2d");
drawingUtil = new DrawingUtil(canvas);

function saveSignature()
{
    var strDataURI = canvas.toDataURL();
    var tempValue = '{!$CurrentPage.parameters.parentId}';
    strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
    VipTourListComponentController.saveSignature(strDataURI,tempValue,processResult);
}
function clearSignature()
{
    context.clearRect(0, 0, canvas.width, canvas.height);
}
function processResult(result)
{
alert('Your Signature has been captured!! Thank You!!');
context.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
Controller:
 @RemoteAction
    global static String saveSignature(String signatureBody, String parentId)
    {
        try
        {
            //parentId = System.currentPageReference().getParameters().get('Id');
            system.debug('Record Id == ' + parentId);
            system.debug('Record IdTourId == ' + TourId);
            system.debug(signatureBody);
            Attachment a = new Attachment();
            a.ParentId = parentId;<
            a.Body = EncodingUtil.base64Decode(signatureBody);
            a.ContentType = 'image/png';
            a.Name = 'LeadGuest Signature.png';
            insert a;
            return '{success:true, attachId:' + a.Id + '}';
        }catch(Exception e)
        {
            return JSON.serialize(e);
        }
    return null;
    }

P.S: Comment Below for any Clarification or help!!
Happy working!! :) :) 

Comments

Post a Comment

Popular posts from this blog

Embed Special Characters in VF Page

Image
Embed & " < > and lot more symbols in VF Page using the below character sequence Code: <body>          <h1> Testing &amp; Blogging </h1>         </body> Result: &quot; " Double quote &amp; & Ampersand ("and" sign) &lt; < Less-than &gt; > Greater-than &nbsp; un-linebreak-able space &brvbar; ¦ Vertical line, maybe with gap in middle &copy; © Copyright sign (C in a circle) &frac14; ¼ One quarter &frac12; ½ One half &frac34; ¾ Three quarters &times; × Times sign: narrow x without serifs &divide; ÷ Division sign: a colon : with a dash through it P.S:  Comment Below for any Clarification or help!! Happy working!! :) :) 
Read more

Error: Compile Error: Illegal conversion from String to System.PageReference

Controller: public PageReference getURL(){ String    url='www.google.com'; //your Logic return url; }  When you save it would throw and error Error: Compile Error: Illegal conversion from String to System.PageReference you were supposed to return a PageRefernce( A PageReference is a reference to an instantiation of a page ) not Just simple String Solution: Create an instantiation of a page and return the instance. public PageReference getURL(){ String    url='www.google.com'; //your Logic PageReference pageRef = new PageReference(url); return pageRef; } P.S:  Comment Below for any Clarification or help!! Happy working!! :) :) 
Read more

Some Common Errors in the Visual flow

Error: An unhandled fault has occurred in this flow An unhandled fault has occurred while processing the flow. Please contact your system administrator for more information Solution:  You Would get a detailed error description to the register email. Error: An Apex error occurred: System.DmlException: Insert failed. First exception on row 0; first error: INVALID_CROSS_REFERENCE_KEY, Task Record Type ID: this ID value isn't valid for the user: : [RecordTypeId]  Solution: The user Might not have access to the Particular Record Type. Or you may be refreing to 15 Digit RecordType Id. Refer 18 Digit ID to solve the issue. Error: Error Occurred: The number of results does not match the number of interviews that were executed in a single bulk execution request. Solution: The size of the return value needs to match the input value. Resolved the issue by using void. P.S:  Comment Below for any Clarification or help!! Happy working!! :) :)  ...
Read more