+ Start a Discussion
anuj huriaanuj huria 

add canvas image with pdf

hi guys i created a vf page,in which im getting the customer's signature on canvas, and saving that page as pdf in the realted list of attachment,
but problem is that the signature is not visible in pdf look into my code 

vf page

<apex:page controller="upl1" SHowHeader="false" sidebar="false" standardStylesheets="false" >
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <apex:stylesheet value="{!URLFOR($Resource.bootstrap,'bootstrap-3.3.6-dist/css/bootstrap.min.css')}"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/>
    <apex:includeScript value="{!URLFOR($Resource.bootstrap,'bootstrap-3.3.6-dist/js/bootstrap.min.js')}"/>

            <div class="well well-lg text-center"><h1>Invoice</h1></div>
            <apex:form id="pbform">
          <apex:pageMessages />
          <div class="container1">
           <h1 class="labelCol vfLabelColTextWrap ">Record Signature:</h1>
           <canvas id="signatureCanvas" height="100px" width="350px" style="border: 3px solid antiquewhite; border-radius: 8px;" ></canvas>
          <div style="margin-left: 41%;">
           <apex:commandButton value="Save Signature" onclick="saveSignature();return false;" styleClass="button1"/>&nbsp;&nbsp;&nbsp;
           <apex:commandButton value="Clear" onclick="clearSign();return false;" styleClass="button1"/>
        <apex:form >
            <apex:pageBlock >
                <apex:pageblockTable value="{!inv}" var="v" styleclass="table table-hover table table-box">
                    <apex:column headerValue="Product name">
                        <apex:outputField value="{!v.name}"/>
                    <apex:column headerValue="Price">
                        <apex:outputField value="{!v.price__c}"/>
                    <apex:column headerValue="Quantity">
                        <apex:outputField value="{!v.quantity__c}"/>
                    <apex:column headerValue="Total">
                        <apex:outputField value="{!v.total_amount__c}"/>
            <div style="margin-left: 41%;">
            <apex:commandButton value="Generate pdf" action="{!gpdf}" styleClass="button1"/>
  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) {
   isDrawing = true;
   prevX = currX;
   prevX = currY;
   currX = event.clientX - canvas.offsetLeft;
   currY = event.clientY - canvas.offsetTop;
   context.fillStyle = "cadetblue";
   context.fillRect(currX, currY, 2, 2);

   function draw(event) {
   if (isDrawing) {
    prevX = currX;
             prevY = currY;
             currX = event.clientX - canvas.offsetLeft;
             currY = event.clientY - canvas.offsetTop;
    context.moveTo(prevX, prevY);
    context.lineTo(currX, currY);
    context.strokeStyle = "cadetblue";
    context.lineWidth = "2";

   function stop(event) {
   if (isDrawing) {
    isDrawing = false;
  function clearSign() {

   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;
   var result = CaptureSignatureController.saveSignature(strDataURI, accId, processResult);

   function processResult(result) {
   window.location.href = '/'+accountId;

  .container1 {
   text-align: center;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: cadetblue;
   font-weight: 500;
   font-size: 14px;
  .button1 {
   font-family: calibri;
   border-radius: 8px;
   background-color: rgb(51, 116, 116);
   height: 36px;
   color: azure;
   font-size: 17px;
   border-width: 0px;
   width: 116px;


global with sharing class upl1 
    public List<cart__c> inv{get;set;}
    Id id;
    global upl1()
        inv=new List<cart__c>();
        inv=[select name,type__c,price__c,quantity__c,total_amount__c from cart__c where consumer__c=:id];
    global static String saveSignature(String imageUrl, String accountId) 
       Attachment accSign = new Attachment();
       accSign.ParentID = accountId;
       accSign.Body = EncodingUtil.base64Decode(imageUrl);
       accSign.contentType = 'image/png';
       accSign.Name = 'Signature Image';
       accSign.OwnerId = UserInfo.getUserId();
       insert accSign;
       return 'success';
      catch(Exception e)
       system.debug('---------- ' + e.getMessage());
       return JSON.serialize(e.getMessage());
  return null; 
    public String rt{get;set;}
    public PageReference gpdf()
        PageReference reRend2 = new PageReference('https://ap2.salesforce.com/'+id);
                                   return reRend2;  
    public void attach() 
        Attachment myAttach = new Attachment();
        myAttach.ParentId = id;//Id of the object to which the page is attached
        myAttach.name = 'inv.name.pdf';
        PageReference myPdf = Page.task7i;//myPdfPage is the name of your pdf page
        myAttach.body = myPdf.getContentAsPdf();
        insert myAttach;

}User-added image

User-added image
Martin Krolik 1Martin Krolik 1
Hi Anuj,

Salesforce renders PDFs on the server side.  Your signatues occur only on the client side.  You need to make is so that when your page is loaded AND a signature has already been saved as an attachment, that you have a simple IMG tag with SRC pointing to the attachment's render url.  In this case, you would probably suppress rendering the actual canvas too.