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 |
|
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 |
|
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 |
|
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 |
|
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
}
});