Articles in this section
Category / Section

How to save the signature image to a folder in .NET WebForms application?

3 mins read

Description

The Signature control by default records the drawn signature in Base64 string format for later regeneration. Hence, we can use this to store in folder in your application.

Solution

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

  1. Initially convert the signature value to the Base64 string value by using the canvas toDataURL() method and then pass it to controller action by using jQuery AJAX post.
  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.

 

 
 
    <div class="frame">
           @Html.EJ().Signature("mysign").Height("400px").StrokeWidth(3).IsResponsive(true)
 
        <input type="button" id="btnSave" name="btnSave" value="Save" />
    </div>
 
<script>
 
 
    $(function () {
 
// function on button click to convert the image to Base64 string value and then passing it to the server side
 
        $("#btnSave").click(function () {
 
 
            var div = $("#mysign");
            var canvas = div["children"]()[0]; 
            image = canvas.toDataURL("image/png");
            newimage = image.replace('data:image/png;base64,', '');
 
            $.ajax({
                type: 'POST',
                url: '@Url.Action("SignatureSave", "Signature")',
                data: {
                    imageData: newimage
                },
 
                success: function (data) {
                    alert("success" );
                }
            });
        });
    });
 
</script>
 
 

 

 

 
// method to get the signature content and then store in a folder
 
 
              static string path = @"C:\Users\David\Desktop\SignatureMVC\App_Data\"; // give your folder in the application for storing
 
 
        [HttpPost]
 
        public ActionResult SignatureSave(string imageData)
        {
 
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
 
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
 
                    byte[] data = Convert.FromBase64String(imageData);
 
                    bw.Write(data);
 
                    bw.Close();
                }
 
            }
            return View();
 
        }
 
 

 

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

Saved signature

Note:

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied