How to capture HTML5 Canvas signature and display it in output label?

Question

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;
} 

Answer 1

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 .