How do I add via code a image Signature?

[Administrador]

We have a custom button that need, when pressed, to activate the 'add image signature mode' in pdfViewer, (with an base64 already settup, that we provided).

When the user press the button, it has to already show up in the canvas a base64 image(we provided the image) and, when he press on the pdfviewer page, the signature image sticks to the page.

We did this with the custom stamp, but we need this feature as a Signature. How can we do this? Add programmatically a image as signature..

thanks!

[Chinnamunia Karthik Chinna Thambi]

Currently, we don't have the support to add base64 as image signature.

As you mentioned, you can use the custom stamp to add the base64 as stamp. Could you please share your requirement as why you need to add the base 64 as image signature. This will be helpful for us to check in our end or suggest an alternate option to achieve your requirement.

[Administrador]

Greetings,  Chinnamunia. Thanks for your help!

We will centralize the stamp image and signature image features in one button only, and disable the original stamp and sign buttons from pdfviewer toolbar.

The signature is a base64 image saved in user data.

When the user clicks the signature button ('Assinatura' in portuguese) , it get's the base64 image from user and enable signature mode to user click on pdfviewer page and sticks the signature to it.

As I mentioned, We did this signature as a custom stamp image, but we need this to save as signature(because the user sees the downloaded document in other pdf visualizers, like adobe acrobat reader).

This is the functionaly that we have(currently inserting signature as custom stamp):

https://youtu.be/Bfhyqjb2k-Y

 

[Administrador]

 I did search in docs api and in your source files, but can't replicate it. It came's to a point that the methods are only available locally in syncfusion Signature module.

We tried this code, but its missing some method to set the signature image and other one to create the signature.

<code>

var annotationName = viewer().annotation.createGUID();

    var pageIndex = viewer().currentPageNumber - 1;

    var pageDiv = document.getElementById(viewer().element.id + '_pageDiv_' + pageIndex);

    var currentLeft = 0;

    var currentTop = 0;

    var currentHeight = 65;

    var currentWidth = 200;

    var zoomFactor = viewer().viewerBase.getZoomFactor();

    var zoomvalue = viewer().viewerBase.getZoomFactor();

    var thickness = viewer().handWrittenSignatureSettings.thickness ? viewer().handWrittenSignatureSettings.thickness : 1;

    var opacity = viewer().handWrittenSignatureSettings.opacity ? viewer().handWrittenSignatureSettings.opacity : 1;

    var strokeColor = viewer().handWrittenSignatureSettings.strokeColor ? viewer().handWrittenSignatureSettings.strokeColor : '#000000';

    var fontSize = 16;

    var fontName = 'Helvetica';

    currentLeft = ((parseFloat(pageDiv.style.width) / 2) - (currentWidth / 2)) / zoomvalue;

    currentTop = ((parseFloat(pageDiv.style.height) / 2) - (currentHeight / 2)) / zoomvalue;

    var inputValue = null;

    var annot = {

        // eslint-disable-next-line max-len

        id: 'Typesign' + viewer().viewerBase.signatureCount, bounds: {

            left: currentLeft / zoomFactor, top: currentTop / zoomFactor, x: currentLeft / zoomFactor,

            // eslint-disable-next-line max-len

            y: currentTop / zoomFactor, width: currentWidth, height: currentHeight

        }, pageIndex: pageIndex, dynamicText: inputValue, data: viewer().viewerBase.signatureModule.outputString, shapeAnnotationType: 'SignatureImage',

        opacity: opacity, strokeColor: strokeColor, thickness: thickness, fontSize: fontSize, fontFamily: fontName, signatureName: annotationName

    };

    viewer().viewerBase.currentSignatureAnnot = annot;

    //method to set the signature image?

    //method to save the signature?

</code>

[Chinnamunia Karthik Chinna Thambi]

Please find the details.

When the user clicks the signature button ('Assinatura' in portuguese) , it get's the base64 image from user and enable signature mode to user click on pdfviewer page and sticks the signature to it. As I mentioned, We did this signature as a custom stamp image, but we need this to save as signature(because the user sees the downloaded document in other pdf visualizers, like adobe acrobat reader).

Currently, we don’t have the support to add the image as signature using API. Could you please share whether your requirement is to prevent the edit or move the image in downloaded document? If your requirement is to lock the image and view in other viewers, you can achieve this using the custom stamp settings. For this, you can use the isLock option to lock the custom stamp image.   We have shared the code snippet and sample to lock the custom stamp image.   Code snippet:         function add(){         var viewer = document.getElementById('container').ej2_instances[0];         viewer.annotation.addAnnotation("Stamp", {             offset: {x: 200, y: 130},             pageNumber: 1,             customStamps: [             {             customStampName: "Image",             customStampImageSource: "", // Provide the base64 here             }             ]         });     }       function lock(){         var viewer = document.getElementById('container').ej2_instances[0];         var collections = viewer.annotationCollection;         collections[0].annotationSettings.isLock = true;         viewer.annotation.editAnnotation(collections[0]);     }   Sample: https://stackblitz.com/edit/react-kahq5f?file=index.js,index.html Steps to lock the stamp:   Run the sample. Click the "Add custom stamp" button to add the custom stamp. Click the "Lock custom stamp" button to lock the custom stamp.   However. We will check the feasibility to add the image as signature using API and get back to you with the further updates in two business days.

We tried this code, but its missing some method to set the signature image and other one to create the signature.

The given code is used to add the signature content using the internal library. So, it is not possible to share the workaround by using this code snippet.

[Chinnamunia Karthik Chinna Thambi]

We have analyzed the feasibility and logged this as a feature request as "Provide the support to add handwritten signature in code behind" . We will implement this feature in any of our upcoming releases and let you know once this feature is implemented. You can track the status using the below feedback link.

Feedback link: Provide the support to add handwritten signature in code behind | Feature Feedback