DEV Community

Cover image for Exploring the Blazor Signature Pad Component
Suresh Mohan for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Exploring the Blazor Signature Pad Component

The Blazor Signature Pad component is a graphical interface that allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. You can save signatures as images and vice versa. Also, you can use your finger, a pen, or mouse on desktop and mobile devices to draw your signature.

Parts of the Blazor Signature Pad Component

Parts of the Blazor Signature Pad Component

It supports all the common web standards and functionalities that our other Essential Blazor controls do: web accessibility, right-to-left rendering, keyboard interaction, modular architecture, and responsiveness, all the while being touch-friendly and sporting a lightweight UI.

Let’s explore the Blazor Signature Pad control, its UI design, and available features with code examples.

Use cases

The Blazor Signature Pad component is used to draw realistic and smooth signatures. The most common use case of the Signature Pad is a form within an app, online or off—anywhere you need to capture a signature.

Key features

Key features of the Blazor Signature Pad component are as follow:

  • Customize the stroke and background.
  • Save and load signatures.
  • Draw signatures.
  • Clear, undo, and redo signatures.
  • Utilize keyboard accessibility and responsiveness.

Customize the stroke and background

The stroke width or thickness is calculated based on the MinStrokeWidth , MaxStrokeWidth , Velocity, and drawing speed. We can also customize the stroke color, background color, and background image using the properties available in the Blazor Signature Pad.

You can set the background image by either hosting the image in your local IIS or using an online image.

Refer to the following code example to load the Signature Pad with a background image: ** **

@using Syncfusion.Blazor.Inputs

<div class=”control-section”>
 <div id=”signature-control”>
  <div class=’e-sign-heading’>
   <span id=”signdescription”>Sign below</span>
  </div>
  <div class=’e-sign-content’>
   <SfSignature BackgroundImage="http://localhost:6969/image/MySignature-1.png" style="width: 400px; height: 300px; background-repeat: no-repeat"></SfSignature>
  </div>
 </div>
</div>

<style>
  .e-sign-content,
  .e-sign-heading {
        width: 400px;
  }

  #signdescription {
        font-size: 14px;
        padding-bottom: 10px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Loading the Blazor Signature Pad with a Background Image

Loading the Blazor Signature Pad with a Background Image

To view the hosted images, we have to enable the Directory Browsing option in IIS , which will create the web.config file inside the hosted folder. Include the following code in the web.config file to resolve the CORS issue.

<?xml version=”1.0” encoding=”UTF-8”?>
<configuration>
 <system.webServer>
  <directoryBrowse enabled=”true” />
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name=”Access-Control-Allow-Origin” value=”*” />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>
Enter fullscreen mode Exit fullscreen mode

Save and load signatures

In the Signature Pad component, you can draw a signature and save it in Base64, blob, and image formats using the SaveAsync method. This method accepts the file type and file name as parameters and can save the signature in PNG, JPEG, and SVG formats. You can also save the signature with a background color and image using the SaveWithBackground property.

The Blazor Signature Pad enables the users to load a pre-drawn signature as Base64 or a URL using the LoadAsync method. This method accepts the URL or Base 64, height, and width of the signature canvas as parameters. It also supports PNG, JPEG, and SVG image formats.

Refer to the following code example to load the pre-drawn signature in Base64 format.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<div class="control-section">
 <div id="signature-control">
  <div class='e-sign-heading'>
   <span id="signdescription">Sign below</span>
   <span class="e-btn-options">
    <SfButton IsPrimary="true" class="e-sign-load" @onclick="OnLoadBase64">Reload</SfButton>
   </span>
  </div>
  <div class='e-sign-content'>
   <SfSignature @ref="signature" style="width: 400px; height: 300px;"></SfSignature>
  </div>
 </div>
</div>
@code{
 private SfSignature signature;
 private string sign;

 private async Task OnLoadBase64()
 {
   sign = await signature.GetSignatureAsync(); // Get signature as Base 64.
   await signature.ClearAsync();
   await signature.LoadAsync(sign, 400, 300); // Load signature as Base 64.
 }
}
<style>
 .e-sign-content,
 .e-sign-heading {
    width: 400px;
 }

 #signdescription {
    font-size: 14px;
    padding-bottom: 10px;
 }

 .e-btn-options {
    float: right;
    margin-bottom: 10px;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

Now let’s learn how to load the pre-drawn signature as a URL. This can be done by either hosting the signature in your local IIS or using an online signature image.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

<div class="control-section">
 <div id="signature-control">
  <div class='e-sign-heading'>
   <span>
    <SfTextBox @ref="text" Placeholder='Enter the hosted link'></SfTextBox>
   </span>
   <span class="e-btn-options">
    <SfButton IsPrimary="true" class="e-sign-load" @onclick="OnLoad">Load</SfButton>
   </span>
   <span id="signdescription">Sign below</span>
  </div>
  <div class='e-sign-content'>
   <SfSignature @ref="signature" style="width: 400px; height: 300px;"></SfSignature>
  </div>
 </div>
</div>
@code{
 private SfSignature signature;
 private string sign;
 private SfTextBox text;
 private async Task OnLoad()
 {
   await signature.LoadAsync(text.Value, 400, 400); // To load the Signature as URL.
 }
}
<style>
 .e-sign-content,
 .e-sign-heading {
    width: 400px;
 }

 #signdescription {
    font-size: 14px;
    padding-bottom: 10px;
 }

 .e-btn-options {
    float: right;
    margin: 10px 0px 10px;
 }
</style>
Enter fullscreen mode Exit fullscreen mode

Refer to the following image.

Loading a Signature as a URL in Blazor Signature Pad

Loading a Signature as a URL in Blazor Signature Pad

Type text as signature

You can easily transform any text into a signature using different font families and font sizes. To do so, use the DrawAsync method, which accepts the signature text, font family, and font size as parameters.

Refer to the following GIF image.

Typed Text as a Signature in Blazor Signature Pad

Typed Text as a Signature in Blazor Signature Pad

Clear, undo, and redo

We can clear the pre-drawn signature using the ClearAsync method, which will clear the entire canvas.

Performing undo and redo actions will undo the last action performed and revert the last undo action performed, respectively, in the Signature Pad component. These can be done by using the UndoAsync and RedoAsync methods.

These actions are handled by saving a snapshot whenever a change occurs in the canvas and maintaining its index value to navigate to when performing undo and redo actions. The index value will be decreased to load the previous action and perform an undo and increased to load the next action and perform a redo.

You can enable or disable the undo and redo buttons using the CanUndoAsync and CanRedoAsync methods. Also, you can easily enable or disable the Clear button using the IsEmptyAsync method.

Refer to the following GIF image.

Clear, Undo and Redo Options in Blazor Signature Pad

Clear, Undo and Redo Options in Blazor Signature Pad

Keyboard accessibility

Also, you can easily interact with the Blazor Signature Pad component using the following keyboard shortcuts:

  • Ctrl+S : Save the signature in the default format (PNG).
  • Ctrl+Z : Undo the previous action.
  • Ctrl+Y** :** Redo the most recent undo action.

Responsiveness and touch-friendly UI

By default, the Blazor Signature Pad adapts well to all mobile devices based on the screen size. It is a touch-friendly control, so users can easily use their finger, pen, or mouse on both desktop and mobile devices to draw signatures.

References

For more details, refer to our Getting Started with Blazor Signature Pad Component documentation and demos.

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and features of our Blazor Signature Pad component. Along with what we’ve seen in this blog, the Signature Pad also supports built-in themes like Material, Bootstrap, and more.

The Signature Pad is available in our Angular, Blazor, React, Vue, JavaScript, ASP.NET (Core and MVC) platforms. Try them out and enjoy hassle-free signing!

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

Related blogs

Top comments (0)