Allow entering of a signature by typing

68 views
Skip to first unread message

Matt Parizeau

unread,
Apr 19, 2018, 2:17:09 PM4/19/18
to pdfnet-w...@googlegroups.com
Q:

Is it possible to click on a signature widget in a document and then enter a signature by typing?

A:

Yes, the following code should be able to get you started. You can add it in a config file.

var createInnerElement = Annotations.SignatureWidgetAnnotation.prototype.createInnerElement;
Annotations.SignatureWidgetAnnotation.prototype.createInnerElement = function() {
 
var el = createInnerElement.apply(this, arguments);

 
var signatureWidget = this;
  el
.on('click', function(e) {
   
// replace with the font you want to use here
   
var fontName = 'Segoe Script';

   
var signatureDialog = $('<div></div>');
    $
('<label>').attr({
       
'for': 'signatureInput'
     
})
     
.text('Type your signature:')
     
.appendTo(signatureDialog);

   
var textInput = $('<input id="signatureInput" type="text" autofocus/>')
     
.appendTo(signatureDialog)
     
.css({
       
'font-family': fontName,
       
'font-size': '50px',
        height
: '50px',
        width
: '500px'
     
});

    signatureDialog
.dialog({
      modal
: true,
      width
: 600,
      height
: 200,
      position
: {
        within
: document.body
     
},
      buttons
: {
       
'OK': function() {
         
// scaled up so it looks good at higher zoom levels
         
var qualityScale = 4;

         
var canvas = document.createElement('canvas');
          canvas
.setAttribute('width', (signatureWidget.Width * qualityScale) + 'px');
          canvas
.setAttribute('height', (signatureWidget.Height * qualityScale) + 'px');
         
var ctx = canvas.getContext('2d');
          ctx
.textBaseline = 'top';
         
var signatureFontSize = (signatureWidget.Height * qualityScale * 0.8);
          ctx
.font = signatureFontSize + 'px ' + fontName;
          ctx
.fillText(textInput.val(), 0, 0);

         
// draws a timestamp
         
var signatureTextLength = ctx.measureText(textInput.val()).width;
          ctx
.textBaseline = 'bottom';
          ctx
.font = (signatureFontSize / 4) + 'px ' + fontName;
          ctx
.fillText(new Date(), signatureTextLength + 10, signatureWidget.Height * qualityScale);

         
var data = canvas.toDataURL();

         
var annotManager = readerControl.docViewer.getAnnotationManager();

         
var stampAnnot = new Annotations.StampAnnotation();
          stampAnnot
.PageNumber = signatureWidget.PageNumber;
          stampAnnot
.X = signatureWidget.X;
          stampAnnot
.Y = signatureWidget.Y;
          stampAnnot
.Width = signatureWidget.Width;
          stampAnnot
.Height = signatureWidget.Height;
          stampAnnot
.Author = annotManager.getCurrentUser();
          stampAnnot
.ImageData = data;
          stampAnnot
.ReadOnly = true;
          stampAnnot
.Listable = false;

         
// removes existing signature
         
var existingStamp = annotManager.getAnnotationsList().filter(function(annot) {
           
return annot instanceof Annotations.StampAnnotation && annot.X === stampAnnot.X && annot.Y === stampAnnot.Y;
         
});
         
if (existingStamp.length > 0) {
            annotManager
.deleteAnnotation(existingStamp[0], false, true);
         
}

          annotManager
.addAnnotation(stampAnnot);
          annotManager
.redrawAnnotation(stampAnnot);

          $
(this).dialog('close');
       
},
       
'Cancel': function() {
          $
(this).dialog('close');
       
}
     
}
   
});
 
});
 
return el;
};

Reply all
Reply to author
Forward
0 new messages