)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to save the Signature image to a folder in an application?

Platform: ASP.NET Web Forms |
Control: Signature |
Published Date: September 1, 2017 |
Last Revised Date: May 8, 2019 |
Product Version: 13.4.0.53
Tags: asp.net_mvc

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

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
sitshetshe
Nov 08, 2018

kkkkkkkkkkkkkkk

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon