Blazorise SignaturePad component

NuGet

Install extension from NuGet.

dotnet add package Blazorise.SignaturePad

Imports

In your main _Imports.razor add:

@using Blazorise.SignaturePad

Basic example

Simply place the SignaturePad extension and you're ready to capture signatures.

<SignaturePad />

Two-way binding

The SignaturePad @bind-Value syntax is used in Blazor for two-way data binding. This means that when a user signs their name using the SignaturePad component, the data representing the signature is automatically updated in the @data-Value parameter. Similarly, if the @data-Value parameter changes elsewhere in your code, the signature displayed in the SignaturePad component will automatically update to reflect this.

To better understand how the SignaturePad component works with two-way data binding, consider the following example:

<Row>
    <Column>
        <Card>
            <CardHeader>
                <CardTitle>Signature pad</CardTitle>
            </CardHeader>
            <CardBody>
                <SignaturePad @bind-Value="@data"></SignaturePad>
            </CardBody>
        </Card>
    </Column>

    <Column>
        <Card>
            <CardHeader>
                <CardTitle>Preview</CardTitle>
            </CardHeader>
            <CardBody>
                <Image Source="@Image64" Fluid />
             </CardBody>
         </Card>
     </Column>
 </Row>

@code {
    byte[] data = null;

    string Image64 => SignaturePad.GetDataUrl( data );
}

Background Color

The BackgroundColor property in Blazorise's SignaturePad customizes the pad's appearance by setting its background color. Accepting a CSS color string, it allows design flexibility, improving visibility or matching aesthetic requirements. It's advisable to use colors that contrast well with the signature for clear visibility.

<SignaturePad BackgroundColor="rgba(232, 222, 252, 1)" />

Pen Color

The PenColor parameter in Blazorise's SignaturePad adjusts the color of the pen used for signatures. Accepting a CSS color string, it enhances customization and user experience. Chosen color should contrast well with the background for optimum visibility.

<SignaturePad PenColor="#ff0000" />

Dot Size

The DotSize property controls the diameter of the signature's stroke. It interprets a numerical input to define the thickness of the line, facilitating user-customizable detail and individuality in the resultant signatures.

<SignaturePad DotSize="5" />

Minimum width

The MinWidth property in the SignaturePad component of Blazorise sets the minimum thickness of the line drawn for a signature. It accepts a numerical input that dictates the smallest possible line width, offering users control over the finesse and precision of the signature strokes.

<SignaturePad MinLineWidth="5" />

Maximum width

The MaxWidth property within Blazorise's SignaturePad governs the maximum thickness of the signature stroke. By accepting a numerical input, it sets an upper limit to the line width, ensuring control over the boldness and prominence of the rendered signatures.

<SignaturePad MaxLineWidth="10"/>

Min Distance

Blazorise's SignaturePad component includes the MinDistance parameter, which determines the minimum distance required for the pen to move before a new stroke is registered. By accepting numerical values, it provides control over the sensitivity of stroke detection, affecting the smoothness and precision of the resulting signatures.

<SignaturePad MinDistance="100" />

Throttle

The Throttle parameter of Blazorise's SignaturePad is responsible for controlling the rate of signature data collection. By accepting a numerical value, it limits how often the pad captures the signature data within a specific time frame, influencing the smoothness and responsiveness of the signature drawing process.

<SignaturePad Throttle="20" />

Velocity filter

The VelocityFilterWeight parameter in Blazorise's SignaturePad is employed to regulate the influence of velocity on the drawn stroke's width. It accepts a numerical value, contributing to a dynamic stroke width based on the speed of signing, which introduces a more natural and fluid appearance to the signatures.

<SignaturePad VelocityFilterWeight="20" />

Custom Size

The CanvasWidth and CanvasHeight properties of the SignaturePad component in Blazorise are used to set the dimensions of the drawing area, or the "canvas", of the SignaturePad.

1. CanvasWidth: This property sets the width of the SignaturePad. The value is usually defined in pixels. By adjusting this value, you can control how wide the signature pad will appear in your application, thus influencing how much horizontal space a user has to create their signature.

2. CanvasHeight: Similarly, this property sets the height of the SignaturePad. Also typically defined in pixels, adjusting this value will control how tall the signature pad is, effectively controlling the vertical space available for the signature.

The use case for these properties generally involves tailoring the size of the SignaturePad to fit a specific design or layout in your application. For instance, you may want a wider SignaturePad for a desktop application where screen real estate is plentiful, while a narrower SignaturePad might be more suitable for a mobile application or a form with a vertical layout.

<SignaturePad CanvasWidth="600" CanvasHeight="400" Shadow="Shadow.Small" />

Image Type

The ImageType, ImageQuality, and IncludeImageBackgroundColor parameters in Blazorise's SignaturePad provide control over the final output of the signature.

ImageType determines the format of the exported image and supports PNG, JPEG, and SVG. This allows users to choose the appropriate format for their needs, balancing factors like image quality and file size.

ImageQuality adjusts the quality of the generated image, specifically for JPEG and PNG formats. It accepts a numerical value between 0 and 1, with 1 being the highest quality. This enables users to fine-tune the trade-off between image fidelity and file size. SVG images do not use this parameter since they're a vector format and do not lose quality.

The IncludeImageBackgroundColor property is an additional parameter that's specifically applicable when ImageType is set to SVG in Blazorise's SignaturePad. When it's enabled (set to true), the SVG output will include the background color as specified by the BackgroundColor property. This offers users more control over the look of the signature pad, especially when they need to maintain the background color in the final SVG image.

<Row>
    <Column>
        <Card>
            <CardHeader>
                <CardTitle>Signature pad</CardTitle>
            </CardHeader>
            <CardBody>
                <SignaturePad @bind-Value="@data" ImageType="SignaturePadImageType.Svg" />
            </CardBody>
        </Card>
    </Column>

    <Column>
        <Card>
            <CardHeader>
                <CardTitle>SVG Image</CardTitle>
            </CardHeader>
            <CardBody>
                <Image Source="@Image64" Fluid />
             </CardBody>
         </Card>
     </Column>
 </Row>

@code {
    byte[] data = null;

    string Image64 => SignaturePad.GetDataUrl( data, SignaturePadImageType.Svg );
}

Undo

The Undo() method in the SignaturePad component removes the last stroke drawn on the signature pad. Each action, or stroke, is independent, and calling Undo() will only affect the most recent one. It's an effective way to correct errors without clearing the entire pad. This function doesn't revert changes to SignaturePad's configuration, such as pen color or width, and has no effect if no strokes have been made.

<Row>
    <Column>
        <Button Color="Color.Primary" Clicked="@OnUndoClicked">
            Undo
        </Button>
    </Column>
</Row>
<Row>
    <Column>
        <SignaturePad @ref="@signaturePadRef" @bind-Value="@data" />
    </Column>
</Row>

@code {
    SignaturePad signaturePadRef;

    byte[] data;

    async Task OnUndoClicked()
    {
        await signaturePadRef.Undo();
    }
}