How To

28 Mar 20184 minutes to read

Save signature image with user defined format

By default, the downloaded image form the signature canvas will be in png format. We can define our own format to download the image with SaveImageFormat property. And we can also save the image along with the background by using the SaveWithBackground property.

In the View page, define the following code.

RAZOR

@Html.EJ().Signature("mySignature").Height("400px").StrokeWidth(3).BackgroundImage("../../Images/progressbar/water.png").IsResponsive(true).saveWithBackground(true)

 @Html.EJ().Button("signSave").Text("Save").ShowRoundedCorner(true).ClientSideEvents(event => event.Click("onSave"))

Add the following script to define the download format for the canvas.

<script type="text/javascript">

     function onSave() {
            var sign = $("#mySignature").ejSignature("instance");
            sign.option("saveImageFormat", "jpg") 
            sign.save("mySignature");
        }

    </script>

The following screenshot illustrates the Signature with saving (downloading) the drawn image along with its background.

To clear the Signature

To clear the signature, you can simply use the clear() method. This method will clear all the drawn strokes in the signature canvas and leaves it empty.

RAZOR

@Html.EJ().Signature("mySignature").Height("400px").StrokeWidth(3).IsResponsive(true)

 @Html.EJ().Button("signClear").Text("Clear").ShowRoundedCorner(true).ClientSideEvents(clientSideEvent => clientSideEvent.Click("onClear"))

<script type="text/javascript">
    function onClear() {
            var sign = $("#mySignature").ejSignature("instance");
            sign.clear();
        }
 </script>

Make signature as responsive

When the signature control is resized or even the window is resized the strokes drawn in the signature will be disappeared. To make the strokes visible even after resizing the window, we must set the IsResponsive property as true.

In the View page, define the following code to render signature with responsive.

RAZOR

@Html.EJ().Signature("mySign").IsResponsive(true)

The following screenshot illustrates the Signature with responsiveness.

Before Responsiveness:

After giving the Responsiveness:

To check whether any input to the signature control since render

We can detect whether not there has been any input to the signature control since render. To detect we can use the storeSnap public variable, which is an array that stores all the canvas inputs. At initial rendering this array is empty and we can use this variable to check for the drawn strokes.

<script type="text/javascript">
      var sign = $("#signature").ejSignature("instance");

            if (ej.isNullOrUndefined(sign.storeSnap)) {
               
                //Something

            }
    </script>

Render Signature from Code behind

Signature can be rendered from the code behind by initializing the required properties in controller and passing those properties via ViewData or Model to the client side

The following code illustrates the initialization of Signature properties in the controller.

//Namespace to get the JavaScript (Signature) component properties
using Syncfusion.JavaScript.Models;

namespace MvcApplication.Controllers
{
    public class SignatureController: Controller
    {
        public ActionResult SignatureFeatures()
        {

            //Initializing the Signature model

            SignatureProperties signObj = new SignatureProperties();

            //Initializing the other properties 

            signObj.Height = "200px";
            signObj.IsResponsive = true;
            signObj.StrokeWidth = 5;

           //Passing Signature properties using the ViewData

             ViewData["SignModel"] = signObj;

            return View();
        }
    }
}

Binding the Signature properties passed via ViewData from the controller in the client side as below.

CSHTML

@{
    Html.EJ().Signature("sign1", (Syncfusion.JavaScript.Models.SignatureProperties)ViewData["SignModel"]).Render();
}