Hello sir/mam,
We are currently using pdftron UI 7.0.0 version for creating and editing pdfs. in that pdf we have one signature annotaion, whenever anyone try to do draw signaure, we get that signature and append current timestamp in to signature. see below image.
Below is code for appending timestamp on signature:
const signatureTool = docViewer.getTool(‘AnnotationCreateSignature’);
signatureTool.on(‘signatureSaved’, async (annotation) => {
const canvas = document.createElement(‘canvas’);
const date = new Date();
const dateText = date.toLocaleString();
// Reference the annotation from the Document
const pageMatrix = docViewer.getDocument().getPageMatrix(annotation[0].PageNumber);
// Set the height & width of the canvas to match the annotation
canvas.height = annotation[0].Height+30;
canvas.width = annotation[0].Width > 160 ? annotation[0].Width : 160;
const ctx = canvas.getContext(‘2d’);
ctx.font = ‘15px serif’;
ctx.fillStyle = rgba(${annotation[0].StrokeColor.R},${annotation[0].StrokeColor.G},${annotation[0].StrokeColor.B},${annotation[0].StrokeColor.A})
;
ctx.fillText(dateText, 7, annotation[0].Height+20, canvas.width-7);
// Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
ctx.translate(-annotation[0].X, -annotation[0].Y);
// Draw the Annotation onto the Canvas
annotation[0].draw(ctx,pageMatrix)
// Convert the Canvas to a Blob Object for Upload
await signatureTool.setSignature(canvas.toDataURL());
instance.closeElements([‘signatureModal’]);
});
Now we have updated pdftron version to 8.3.0 and updated the signature code:
const signatureTool = documentViewer.getTool(‘AnnotationCreateSignature’);
signatureTool.addEventListener(‘signatureSaved’, (annotation) => {
const canvas = document.createElement(‘canvas’);
const date = new Date();
const dateText = date.toLocaleString();
// Reference the annotation from the Document
const pageMatrix = documentViewer.getDocument().getPageMatrix(annotation[0].PageNumber);
// Set the height & width of the canvas to match the annotation
canvas.height = annotation[0].Height+30;
canvas.width = annotation[0].Width > 160 ? annotation[0].Width : 160;
const ctx = canvas.getContext(‘2d’);
ctx.font = ‘15px serif’;
ctx.fillStyle = rgba(${annotation[0].StrokeColor.R},${annotation[0].StrokeColor.G},${annotation[0].StrokeColor.B},${annotation[0].StrokeColor.A})
;
ctx.fillText(dateText, 7, annotation[0].Height+20, canvas.width-7);
// Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
ctx.translate(-annotation[0].X, -annotation[0].Y);
// Draw the Annotation onto the Canvas
annotation[0].draw(ctx,pageMatrix)
// Convert the Canvas to a Blob Object for Upload
signatureTool.setSignature(canvas.toDataURL());
instance.UI.closeElements([‘signatureModal’]);
});
this code is not working in 8.3.0 see below image: