How to Add Signature Images Using the customStampSettings API in Blazor PDF Viewer

How to Add Signature Images Using the customStampSettings API in Blazor PDF Viewer

Description:

This article explains how to add signature images to a PDF document using the customStampSettings API in Syncfusion’s Blazor PDF Viewer. It guides you through integrating signature images into your PDF documents, customizing their position, size, and appearance directly within the viewer.

Solution:

To add signature images in a PDF using the customStampSettings API in the Blazor PDF Viewer, you need to configure the CustomStampSettings with the path to the signature image. You can set the position, size, and other properties to display the signature as a stamp on the PDF.

Prerequisites:

1. Syncfusion Blazor PDF Viewer Setup: Ensure you have installed and set up the Syncfusion Blazor PDF Viewer component in your Blazor project. If you haven’t already done so, you can follow the Syncfusion Blazor PDF Viewer - Getting Started guide.
2. Basic Knowledge of Blazor: Familiarity with Blazor components and how to use them will be helpful in understanding and implementing this solution.

Code Snippet:

Use this Code Snippet to add signature images as custom stamp annotations using the customStampSettings API in the Blazor PDF Viewer.

@page "/"
@using Syncfusion.Blazor.Buttons;

<SfButton OnClick="stampClicked">Add Signature as Custom Stamp Annotation</SfButton>

<SfPdfViewer2 @ref="pdfviewer"
              DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%">
    <PdfViewerCustomStampSettings CustomStamps="@pdfViewerCustomStamps">
    </PdfViewerCustomStampSettings>
</SfPdfViewer2>

@code {
    private SfPdfViewer2 pdfviewer;
    public string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";  // Path to your PDF document
    public List<PdfViewerCustomStamp> pdfViewerCustomStamps { get; set; } = new List<PdfViewerCustomStamp>();

    // Method triggered by the button click to add the custom stamp
    public void stampClicked()
    {
        pdfViewerCustomStamps = new List<PdfViewerCustomStamp>()
        {
            new PdfViewerCustomStamp()
            {
                // Defines the custom stamp name to be displayed in the stamp menu of the toolbar
                CustomStampName = "Signature Stamp",
                
                // Define the custom stamp image source, here we use a base64 string for the signature image
                CustomStampImageSource = "base64 string here"
            }
        };
    }
}

Key Features Used in the Code:

1. PdfViewerCustomStampSettings: This feature enables the addition of custom stamps to the PDF Viewer, allowing you to include custom images like signatures.
2. CustomStampImageSource: This property defines the image source for the custom stamp, which can be provided as a base64 string for displaying signature images in the PDF Viewer.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article has guided you on how to add signature images to a PDF document using the customStampSettings API in the Blazor PDF Viewer. By following these steps, you can easily apply signature stamps to your PDF documents, making document signing efficient and customizable.

You can refer to Blazor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!