Add graphical signature

This sample demonstrates the use of graphical signature feature. The tool is available via the Annotation Editor's toolbar button Signature tool.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; let viewer; function updateDestinationLocation(destinationSize) { if(viewer) { var options = viewer.options; var pageSize = viewer.getPageSize(0); options.signTool.location = {x: (pageSize.width - destinationSize.width) / 2, y: (pageSize.height - destinationSize.height) / 3}; } } let options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: true, penColor: 'darkblue', penWidth: 2, canvasSize: { width: 500, height: 200 }, autoResizeCanvas: true, destinationScale: 0.5, afterShow: function(dialog) { updateDestinationLocation(dialog.destinationSize); }, beforeAdd: function() { //viewer.layoutMode = 1; return true; } }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.layoutMode = 0; viewer.mouseMode = 1; viewer.toolbarLayout.viewer = { default: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], mobile: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'] }; viewer.toolbarLayout.annotationEditor = { default: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], mobile: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'] }; viewer.zoom = 70; viewer.applyToolbarLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-signature-tool.pdf"); }
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; let viewer; function updateDestinationLocation(destinationSize) { if(viewer) { var options = viewer.options; var pageSize = viewer.getPageSize(0); options.signTool.location = {x: (pageSize.width - destinationSize.width) / 2, y: (pageSize.height - destinationSize.height) / 3}; } } let options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings(), restoreViewStateOnLoad: false }; options.signTool = { selectedTab: 'Draw', saveSignature: true, penColor: 'darkblue', penWidth: 2, canvasSize: { width: 500, height: 200 }, autoResizeCanvas: true, destinationScale: 0.5, afterShow: function(dialog) { updateDestinationLocation(dialog.destinationSize); }, beforeAdd: function() { //viewer.layoutMode = 1; return true; } }; options.restoreViewStateOnLoad = false; viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.layoutMode = 0; viewer.mouseMode = 1; viewer.toolbarLayout.viewer = { default: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], mobile: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'] }; viewer.toolbarLayout.annotationEditor = { default: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], mobile: ['open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'edit-sign-tool', 'edit-undo', 'doc-title', '$split', 'about'] }; viewer.zoom = 70; viewer.applyToolbarLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-signature-tool.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Default Graphical Signature</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }