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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.