ejSignature

The ejSignature is a JavaScript Plugin used to capture or drawing the smooth signatures, it captures signature as vector outlines of strokes.
Using ejSignature we can customize the background, stroke width and stroke color and also convert captured signature to an image format.

Syntax

  • javascript
  • $(element).ejSignature()

    Example

  • html
  • <div id="signature"></div> 
    	<script> 
    	// Create signature 
    	$('#signature').ejSignature({ 
    		
    	}); 
    	</script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.signature.js

    • module:ej.touch.js

    Members

    backgroundColor string

    This property is used to set the background color for the signature.

    Default Value:

    • “#ffffff”

    Example

  • javascript
  • $("#signature").ejSignature({ 
    		backgroundColor: "yellow" 
    	});

    backgroundImage string

    This property is used to set the background image for the signature.

    Example

  • javascript
  • $("#signature").ejSignature({ 
    		backgroundImage: "image.jpg" 
    	});

    enabled boolean

    Enables or disables the Signature textbox widget.

    Default Value:

    • true

    Example

  • javascript
  • $("#signature").ejSignature({
    		enabled: false
    	});

    height string

    Sets the height of the Signature control.

    Default Value:

    • “100%”

    Example

  • javascript
  • $("#signature").ejSignature({
    		height: "400px"
    	});

    isResponsive boolean

    Enables/disables responsive support for the signature control (i.e) maintain the signature drawing during the window resizing time.

    Default Value:

    • false

    Example

  • javascript
  • $("#signature").ejSignature({
    		isResponsive: true
    	});

    saveImageFormat enum

    Allows the type of the image format to be saved when the signature image is saved.

    Name

    Description

    PNG

    To save the signature image with PNG format only.

    JPG

    To save the signature image with JPG format only.

    BMP

    To save the signature image with BMP format only.

    TIFF

    To save the signature image with TIFF format only.

    Example

  • javascript
  • $("#signature").ejSignature({
    		saveImageFormat:ej.SaveImageFormat.jpg
    	});

    saveWithBackground boolean

    Allows the signature image to be saved along with its background.

    Default Value:

    • false

    Example

  • javascript
  • $("#signature").ejSignature({
    		saveWithBackground:true,
    		backgroundImage: "image.jpg" 
    
    	});

    showRoundedCorner boolean

    Enables or disables rounded corner.

    Default Value:

    • true

    Example

  • javascript
  • $("#signature").ejSignature({
    		showRoundedCorner: false 
    	});

    strokeColor string

    Sets the stroke color for the stroke of the signature.

    Default Value:

    • “#000000”

    Example

  • javascript
  • $("#signature").ejSignature({
    		strokeColor: "blue" 
    	});

    strokeWidth number

    Sets the stroke width for the stroke of the signature.

    Default Value:

    • 2

    Example

  • javascript
  • $("#signature").ejSignature({
    		strokeWidth: 3 
    	});

    width string

    Sets the width of the Signature control.

    Default Value:

    • “100%”

    Example

  • javascript
  • $("#signature").ejSignature({
    		height: "600px"
    	});

    Methods

    clear()

    Clears the strokes in the signature.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("clear");

    destroy()

    Destroys the signature widget.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("destroy");

    disable()

    Disables the signature widget.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("disable");

    enable()

    Enables the signature widget.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("enable");

    hide()

    Hides the signature widget.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("hide");

    redo()

    redo the last drawn stroke of the signature

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("redo");

    refresh()

    Refreshes the Signature widget

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("refresh");

    save(filename)

    used to save the drawn image.

    Name

    Type

    Description

    Filename

    string

    The file name of the signature to be downloaded.

    NOTE

    This method accepts string as an argument and this is optional. If the argument filename is not given then the signature will be downloaded with any random name.

    Example

  • javascript
  • $("#signature").ejSignature("save","UserSignature");

    show()

    Used to Show the signature widget, if it is already hidden.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("show");

    undo()

    undo the last drawn stroke of the signature.

    NOTE

    This method does not accept any arguments.

    Example

  • javascript
  • $("#signature").ejSignature("undo");

    Events

    change

    Triggers when the stroke is changed.

    Name

    Type

    Description

    cancel

    boolean

    Set this option to true to cancel the event.

    model

    Object

    Instance of the signature model object.

    type

    string

    Name of the event.

    lastImage

    string

    Gives the last stored image

    Example

  • javascript
  • $("#signature").ejSignature({
    		change: function (argument) {
    			//do something
    		}
    	});

    mouseDown

    Triggered when the pointer is clicked or touched in the signature canvas.

    Name

    Type

    Description

    cancel

    boolean

    Set this option to true to cancel the event.

    model

    Object

    Instance of the signature model object.

    type

    string

    Name of the event.

    value

    object

    returns all the event values

    Example

  • javascript
  • $("#signature").ejSignature({
    		mousedown: function (argument) {
    			//do something
    		}
    	});

    mouseMove

    Triggered when the pointer is moved in the signature canvas.

    Name

    Type

    Description

    cancel

    boolean

    Set this option to true to cancel the event.

    model

    Object

    Instance of the signature model object.

    type

    string

    Name of the event.

    value

    object

    returns all the event values

    Example

  • javascript
  • $("#signature").ejSignature({
    		mousemove: function (argument) {
    			//do something
    		}
    	});

    mouseUp

    Triggered when the pointer is released after click or touch in the signature canvas.

    Name

    Type

    Description

    cancel

    boolean

    Set this option to true to cancel the event.

    model

    Object

    Instance of the signature model object.

    type

    string

    Name of the event.

    value

    object

    returns all the event values

    Example

  • javascript
  • $("#signature").ejSignature({
    		mouseup: function (argument) {
    			//do something
    		}
    	});