5

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}"/> </div> </div> @RemoteAction global static String signatureCanvas(String signatureBody, String parentId) { try{ system.debug('Record Id == ' + parentId); system.debug(signatureBody); 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; }
Improve this question

1 Answer 1

Reset to default
4

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

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

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 .

Improve this answer
4
  • 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. Commented Jan 8, 2014 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}/> Commented Jan 8, 2014 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. Commented Jan 9, 2014 at 6:02
  • @MohithKumar Thank you so much for the immense help. We are able to capture the signature now as per your code. Commented Jan 9, 2014 at 12:51

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.