JavaScript API

ejSignature

11 Dec 20186 minutes to read

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

$(element).ejSignature()

Example

<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

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

backgroundImage `string`

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

Example

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

enabled `boolean`

Enables or disables the Signature textbox widget.

Default Value:

true

Example

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

height `string`

Sets the height of the Signature control.

Default Value:

“100%”

Example

$("#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

$("#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

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

saveWithBackground `boolean`

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

Default Value:

false

Example

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

	});

showRoundedCorner `boolean`

Enables or disables rounded corner.

Default Value:

true

Example

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

strokeColor `string`

Sets the stroke color for the stroke of the signature.

Default Value:

“#000000”

Example

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

strokeWidth `number`

Sets the stroke width for the stroke of the signature.

Default Value:

2

Example

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

width `string`

Sets the width of the Signature control.

Default Value:

“100%”

Example

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

Methods

clear()

Clears the strokes in the signature.

NOTE

This method does not accept any arguments.

Example

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

destroy()

Destroys the signature widget.

NOTE

This method does not accept any arguments.

Example

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

disable()

Disables the signature widget.

NOTE

This method does not accept any arguments.

Example

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

enable()

Enables the signature widget.

NOTE

This method does not accept any arguments.

Example

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

hide()

Hides the signature widget.

NOTE

This method does not accept any arguments.

Example

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

redo()

redo the last drawn stroke of the signature

NOTE

This method does not accept any arguments.

Example

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

refresh()

Refreshes the Signature widget

NOTE

This method does not accept any arguments.

Example

$("#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

$("#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

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

undo()

undo the last drawn stroke of the signature.

NOTE

This method does not accept any arguments.

Example

$("#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

$("#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

$("#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

$("#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

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