We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to add specific predefined stamp to pdf page?


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"




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

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




    function onclick="addText() {

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




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];



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.

3 Replies 1 reply marked as answer

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team April 18, 2023 03:21 PM UTC

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.

Marked as answer

JD Janis Dzenis April 19, 2023 02:33 PM UTC

Hi Chinnamunia,

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



CK Chinnamunia Karthik Chinna Thambi Syncfusion Team April 20, 2023 04:38 AM UTC

Thanks for the update.


We are closing this forum.

Live Chat Icon For mobile
Up arrow icon