How To Integrate Signature Pad Into The Blazor Project

Introduction

We needed to include the ability to append signatures in one of our projects. Online checklists are completed by technicians, who must then have a responsible party and themselves sign the list. The findings of the list and the signatures are then included in a created PDF document. The signatures must be made using an iPad Pro and a web interface.

Using a mouse, touchpad, or touchscreen, users can sign documents or draw their signature on a canvas signature pad, a web-based tool. JavaScript and the HTML5 canvas element can be used to implement a canvas signature pad in a Blazor application.

The following is a straightforward illustration of how to make a canvas signature pad in a Blazor application:

To integrate a signature pad into a Blazor project, you can follow these steps:

Step 1 - Create a simple Blazor web assembly project

Find a library or component that provides a signature pad functionality. Several options are available, such as SignaturePad.js, Signature Pad, and HTML5 Canvas-based Smooth Signature Pad.

Install the library or component using the package manager of your choice. For example, if you are using NuGet, you can use the following command:

dotnet add package SignaturePad.js

Import the library or component into your Blazor project. You can do this by adding the following line to the top of your Razor file:

@using SignaturePad.js

Step 2 - Create a model class

using System.ComponentModel.DataAnnotations;
namespace BlazorSignatureJS.Models {
    public class SignatureApproved {
        [Required(ErrorMessage = "Printed name is required")]
        public string PrintedName {
            get;
            set;
        }
        public string Signature {
            get;
            set;
        }
        [Required(ErrorMessage = "Signature date is required")]
        public DateTime SignatureDate {
            get;
            set;
        } = DateTime.UtcNow;
    }
}

Create a container class,

namespace BlazorSignatureJS.Models {
    public class StateContainer {
        public SignatureApproved SignatureApproved {
            get;
            set;
        }
    }
}

Step 3 - Create a Blazor component with name as signature

Add the signature pad to your Razor file. You can do this by using the SignaturePad component provided by the library or component. For example:

@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager
@inject StateContainer StateContainer

@page "/"
<PageTitle>Index</PageTitle>

<EditForm id="@signatureForm" Model="StateContainer.SignatureApproved" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <h1>Agreement</h1>                        
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <ValidationSummary />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <label>Print Your Name:</label>
            <InputText @bind-Value="StateContainer.SignatureApproved.PrintedName" class="form-control" />
        </div>
        <div class="col-sm-6 col-md-3">
            <label>Signature Date:</label>
            <InputDate @bind-Value="StateContainer.SignatureApproved.SignatureDate" class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="alert alert-danger @signatureAlert">Signature Required.</div>
            <label>Please Sign Below:</label><br />
            <canvas id="signature-pad" class="signature-pad border" @ref="_canvas"></canvas>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <a id="clear-signature" class="btn btn-light border">Clear</a>
        </div>
    </div>
</EditForm>

<div class="row my-5 text-right">
    <div class="col-sm-12 col-md-6">
        <button type="submit" form="@signatureForm" class="btn btn-primary form-control">Submit</button>
    </div>
</div>

@code {
    public ElementReference _canvas;
    private string signatureForm = "signatureForm";
    private string saveSignature {
        get;
        set;
    }
    private string noSignature {
        get;
        set;
    }
    private string signatureAlert {
        get;
        set;
    }
    private async Task < string > GetSignature() {
        return await JsRuntime.InvokeAsync < string > ("getImageData", _canvas);
    }
    private async void HandleValidSubmit() {
        saveSignature = await GetSignature();
        if (string.Equals(saveSignature, noSignature)) {
            signatureAlert = "visible";
            StateHasChanged();
            return;
        }
        StateContainer.SignatureApproved.Signature = saveSignature;
        NavManager.NavigateTo("/Review");
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            noSignature = await JsRuntime.InvokeAsync < string > ("setSignature", _canvas);
        }
    }
    protected override async Task OnInitializedAsync() {
        if (StateContainer.SignatureApproved == null) StateContainer.SignatureApproved = new SignatureApproved();
        signatureAlert = "invisible";
    }
}

Optionally, you can customize the appearance and behavior of the signature pad by using the various properties and events provided by the library or component. Save the signature as an image file or send it to the server for storage. You can do this by using the ToDataURL the method provided by the library or component to convert the signature to a data URL, and then send the data URL to the server using an HTTP request.

Step 4 - Create Review Blazor Component

@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager
@inject StateContainer StateContainer

@page "/Review"
<PageTitle>Review</PageTitle>
<EditForm Model="StateContainer.SignatureApproved">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <h1>Agreement</h1>           
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <label>Signed:</label><br />
            <img src="@StateContainer.SignatureApproved.Signature">
        </div>
        <div class="col-sm-6 col-md-3">
            <label>Dated:</label>
            <InputDate @bind-Value="StateContainer.SignatureApproved.SignatureDate" class="form-control disabled" />
        </div>
    </div>
</EditForm>
@code {
}

This is component is used for showing the signature of the applicant.

Add a javascript file and write a code for the signature pad

function setSignature(element) {
    var canvas = document.getElementById(element.id)
    var signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255, 255, 255, 255)',
        penColor: 'rgb(0, 0, 0)'
    });
    document.getElementById('clear-signature').addEventListener('click', function() {
        signaturePad.clear();
    });
    return signaturePad.toDataURL();
}

function clearSignature(element) {
    var canvas = document.getElementById(element.id);
    var signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255, 255, 255, 255)',
        penColor: 'rgb(0, 0, 0)'
    });
    signaturePad.clear();
}

function getImageData(element) {
    var saveImage = element.toDataURL();
    return saveImage;
}

Conclusion

I'm done now! A simple canvas signature pad is now available in your Blazor application. By changing various settings on the SignaturePad object, you may alter the look and functionality of the signature pad. For instance, you can choose the color of the pen, decide whether signatures can be erased, and more.