Blazor.SignaturePad 7.1.1

SignaturePad

A simple to use blazor component to draw a signature. It supports both mouse and touch inputs and works on Blazor Server and Blazor WebAssembly.

See a live demo right here on github.

Installation

You can install from Nuget using the following command:

Install-Package Blazor.SignaturePad

Or via the Visual Studio package manger.

Basic usage

Start by adding the following using statement to your root _Imports.razor.

    @using SignaturePad

Next you should define a property in your class. For example:

public class MyInput
{
    public byte[] Signature { get; set; } = Array.Empty<byte>();
}

You can then use it wherever you want.

    <SignaturePad @bind-Value="Input.Signature" />

The control provides you the image data as base64 byte[]

To get the image, you'll need to convert to byte[] into a string. For example:

public class MyInput
{
    public byte[] Signature { get; set; }
    public string SignatureAsBase64 => System.Text.Encoding.UTF8.GetString(Signature);
}

Providing options

You can configure the SignaturePad by providing a SignaturePadOptions instance to the component.

<SignaturePad @bind-Value="Input.Signature" Options="_options" />

@code {
    public MyInput Input { get; set; } = new();

    private SignaturePadOptions _options = new SignaturePadOptions
    {
        LineCap = LineCap.Round,
        LineJoin = LineJoin.Round,
        LineWidth = 20
    };
}