+ Start a Discussion
raorao 

signature capturing in visualforce page

Can anybody please tell me wether we can capture signature in visualforce page.
RyanhRyanh

Not sure if this is what you're looking for, but there are several AppExchange apps that support digital signature processes:

1) EchoSign

2) DocuSign

3) AssurSign (or AssureSign?)

 

abhi09abhi09

Has anyone implemented digital signature in visual force page ?

Mounika VorugantiMounika Voruganti
Yes  Here is the code 

VF Page:

<apex:page controller="AnyObjectSignatureController" showheader="false" sidebar="false" standardStylesheets="false">
<div class="container">
  
   <canvas id="signatureCanvas" height="100px" width="350px" style="border: 3px solid antiquewhite; border-radius: 8px;" ></canvas>
<br/>
<br/>
<input id="saveSigButton" style="text-align: center;" type="button" name="SigCap" onclick="saveSignature();" value="Signature"></input>


  </div><br/>
<script>
    var canvas;   
    var context;   
    var drawingUtil;   
    var isDrawing = false;
    var accountId = '';   
    var prevX, prevY, currX, currY = 0;   
    var accountId;

    function DrawingUtil() {    
        isDrawing = false;   
        canvas.addEventListener("mousedown", start, false);   
        canvas.addEventListener("mousemove", draw, false);   
        canvas.addEventListener("mouseup", stop, false);   
        canvas.addEventListener("mouseout", stop, false);   
        canvas.addEventListener("touchstart", start, false);   
        canvas.addEventListener("touchmove", draw, false);   
        canvas.addEventListener("touchend", stop, false);    
        w = canvas.width;
        h = canvas.height;   
    }

    function start(event) {    
        event.preventDefault();
        isDrawing = true;    
        prevX = currX;    
        prevX = currY;    
        currX = event.clientX - canvas.offsetLeft;    
        currY = event.clientY - canvas.offsetTop;
        context.beginPath();    
        context.fillStyle = "cadetblue";    
        context.fillRect(currX, currY, 2, 2);
        context.closePath();
    }

    function draw(event) {    
        event.preventDefault();    

        if (isDrawing) {
            prevX = currX;
            prevY = currY;
            currX = event.clientX - canvas.offsetLeft;
            currY = event.clientY - canvas.offsetTop;

            context.beginPath();
            context.moveTo(prevX, prevY);
            context.lineTo(currX, currY);
            context.strokeStyle = "cadetblue";
            context.lineWidth = "2";
            context.stroke();
            context.closePath();    
        }   
    }

    function stop(event) {    
        if (isDrawing) {
            context.stroke();
            context.closePath();
            isDrawing = false;    
        }   
    }

    function clearSign() {    
        context.clearRect(0,0,w,h);   
    }

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

    function saveSignature() {  
        
        var strDataURI = canvas.toDataURL(); 
        strDataURI = strDataURI.replace(/^data:image\/(png|jpg);base64,/, "");
        var accId = location.href.split('=')[1];    
        accountId = accId;  
         
  Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AnyObjectSignatureController.saveSignature}',strDataURI,

function(result, event){
});

alert('signature saved');
    }

    function processResult(result) {    
        alert(JSON.stringify(result)); 
        window.location.href = '/'+accountId;  
    }
    
    
    
</script>

</apex:page>

Apex controller:

global with sharing class AnyObjectSignatureController 
{
public AnyObjectSignatureController()
{
system.debug('test1');
}
@RemoteAction
global static List<Account> findAccounts(String name)
{
name = '%' + name + '%';
List<Account> accounts = [Select Id, Name from Account where Name like :name];
return accounts;
}
@RemoteAction
global static String saveSignature(String signatureBody) 
{
system.debug('test12344');

try
{

system.debug(signatureBody);
Attachment a = new Attachment();
a.ParentId = '0011100001NN9Qo';
a.Body = EncodingUtil.base64Decode(signatureBody);
a.ContentType = 'image/png';
a.Name = 'Signature Capture.png';
insert a;
system.debug('aid@@@'+a.Id);
return '{success:true, attachId:' + a.Id + '}';

}catch(Exception e)
{
return JSON.serialize(e);
}
}

}