I need to capture the customer signature from Html5 Canvas and display it in a Output label. Can anyone please help me out in this?

 <div data-role="page" id="signatureCaptureHome" style="over-flow:auto; width:10px; height:10px"  > 
      <div data-role="content" id="content">
       <canvas id="signatureCanvas"  height="50px" width="550px" style= "border:1px solid black" />
        <apex:outputLabel style="font-weight:Bold" value="{! signatureCanvas}"/>

        global static String signatureCanvas(String signatureBody, String parentId) {
              system.debug('Record Id == ' + parentId);
              Attachment a = new Attachment();
              a.ParentId = parentId;
              a.Body = EncodingUtil.base64Decode(signatureBody);
              a.ContentType = 'image/png';
             a.Name = 'Signature Capture.png';
             insert a;
           return '{success:true, attachId:' + a.Id + '}';
         }catch(Exception e){
             return JSON.serialize(e);
     return null;

OutputLabel wont help you here.

Use an Image tag basically if you have data in base64encoded in the signatureCanvas variable of your code

<img id="image" alt="data url loaded image" />

If above is the image tag ,then use the following java-script onload to show on vf

  var dataURL="data:image/jpeg;base64,"+{!signatureCanvas};
    document.getElementById("image").src = dataURL;

or try the below directly

<img id="image" alt="data url loaded image" "data:image/jpeg;base64,"+{!signatureCanvas}/>

Note carefully that the {!signatureCanvas} should have base64 encoded data when returned .

  • Thank you so much for the quick response Mohith. Can you please explain us bit more about the controller part? How will I return the base64 encoded data in the below code? I have attached the controller part too. We need to capture 14 signatures in total. – Lavanya Sanathkumar Jan 8 '14 at 14:00
  • 2
    ok i see that data is already base64 encoded and hence you can try the above code directly <img id="image" alt="data url loaded image" "data:image/jpeg;base64,"+{!signatureCanvas}/> – Mohith Shrivastava Jan 8 '14 at 14:34
  • Also, see my answer on the developerforce forums which has a basically functional version. It could be adapted to suit your needs. – sfdcfox Jan 9 '14 at 6:02
  • @MohithKumar Thank you so much for the immense help. We are able to capture the signature now as per your code. – Lavanya Sanathkumar Jan 9 '14 at 12:51

Your Answer

