How to add specific predefined stamp to pdf page?

[Janis Dzenis]

Hi,

Here is a small sample how to create text using PdfViewer EJ2 ASP.NET core when user has pressed button 'FreeText':

<button id="set" onclick="addText()">FreeText</button>

<div style="width:100%;height:600px">

    <ejs-pdfviewer id="pdfviewer"

                   style="height:600px"

                   serviceUrl="/api/PdfViewer"

                   documentPath="PDF_Succinctly.pdf"

freeTextSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings

            {FillColor="green", BorderColor="blue", FontColor="yellow"})"

    </ejs-pdfviewer>

</div>

<script>

    function onclick="addText() {

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        pdfViewer.annotation.setAnnotationMode('FreeText');

    }

</script>

My question is - is it possible to do the same with Stamp? I would like to define specific .jpg picture and when user has pressed StampTypeA button, then pressed on specified place in pdf page, symbol of TypeA is added, when user pressed StampTypeB button, different predefined symbol would be added.

<button id="set" onclick="addStampTypeA()">StampTypeA</button>

function onclick="addStampTypeA() {

        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        pdfViewer.annotation.setAnnotationMode('Stamp');

    }

Do I need to use Stamp or CustomStamp for this? As I understand I have to use these settings:

   stampSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings

{Opacity=0.3, Author="Guest User"})"

but i don't understand how to configure them so that specific stamp(typeA or typeB) would be used on different button press. Any help would be highly appreciated.

[Chinnamunia Karthik Chinna Thambi]

Refer the below code snippet and sample to add custom stamp in PDF.

Code snippet:

 

    function stampA() {

        var viewer = document.getElementById('pdfviewer').ej2_instances[0];

        var img = new Image();

        img.src = "square image.png"; // Place the image in the wwwroot folder and Provide the image name here.

        img.onload = function () {

            var canvas = document.createElement('canvas'),

            ctx = canvas.getContext('2d');

            canvas.height = img.naturalHeight;

            canvas.width = img.naturalWidth;

            ctx.drawImage(img, 0, 0);

            var imageBase64 = canvas.toDataURL('image/png');

            var pdfViewerInstance = document.getElementById('pdfviewer').ej2_instances[0];

            pdfViewerInstance.customStampSettings = { customStamps: [{ customStampImageSource: imageBase64, customStampName: 'square image' }], opacity: 1, height: 120, width: 250 };

        };

    }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AddCustomStampFromImage-1701017775.zip

Steps to add the stamp:

• Run the sample.
• Click the "Add Stamp A" or "Add Stamp B" button to add the stamp in PDF.

[Janis Dzenis]

Hi Chinnamunia,

Thank you for the answer, this is exactly what I was looking for! We can close this ticket.

Regards,

Janis

[Chinnamunia Karthik Chinna Thambi]

Thanks for the update.

 

We are closing this forum.