How to save the Signature image to a folder in the Blazor application

Description

The Signature control by default saves the signature as an image in the download folder. Hence, we can use this to store it in a specific folder in your application.

Solution

To store the drawn signature image in a specific folder, follow the steps below:

1. Initially convert the signature value to the Base64 string value by using the GetSignatureAsync() method.
2. Specify the file name and path to save the signature using FileStream.
3. Convert the image’s Base64 string value to the image using BinaryWriter.

The following code explains how to store signature image to a folder in an application.

[Index.razor]

<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 class="e-sign-save" @onclick="onSave">Save</SfButton>
           </span>
       </div>
       <SfSignature style="height:100%; width: 100%;"></SfSignature>
   </div>
</div>

@code{

   private async Task onSave()
   {
       //It converts the image to a Base64 string value.
       string base64image = await signature.GetSignatureAsync(SignatureFileType.Png);
       string path = @"D:\Blazor\server-sample\Data\Signature-files\"; // To specify the path where you want to save the signature image in the application.
       var filepath = path + "signature.png"; // To specify the signature file name
       using (FileStream fs = new FileStream(filepath, FileMode.CreateNew))
       {
           using (BinaryWriter bw = new BinaryWriter(fs))
           {
               string convert = base64image.Replace("data:image/png;base64,", String.Empty);
               byte[] data = Convert.FromBase64String(convert);
               bw.Write(data);
               bw.Close();
           }
        }
     clearDisabled = true;
    }
}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/server-sample-2039137296

Screenshot:
The below is the screenshot of the image stored in the folder by using the above codes.