SignPad is a light-weight and touch-enabled jQuery plugin that creates a digital signature pad utilizing HTML5 canvas. It’s splendid for on-line contracts, person agreements, and even digital waivers. As an alternative of printing, signing, and scanning paperwork, customers can signal instantly on the display.
This signature pad plugin permits customers to signal paperwork electronically and helps undo and clear features. It captures signatures as PNG photos (as base64) and sends them to servers in JSON format with person IDs and timestamps.
Easy methods to use it:
1. To get began, be sure you have jQuery loaded in your undertaking.
<script src="/path/to/cdn/jquery.min.js"></script>
2. Embrace the signpad.js script after jQuery.
<script src="signpad.js"></script>
3. Create an empty div aspect on which the signature pad will probably be rendered.
<div id="signpad"></div>
4. Initialize the plugin to generate a primary signature pad with default settings.
$('#signpad').SignPad({
// choices right here
});
5. All potential configuration choices.
$('#signpad').SignPad({
// width/peak of the signature pad
width : 400,
peak : 200,
// colour/width of the stroke
lineColor : '#0000FF',
lineWidth : 2,
// person ID
userId : null,
// canvas ID
canvasId : 'signature-pad',
// customized CSS courses
types : {
clearBtn : "btn",
undoBtn : "btn",
saveBtn : ""
}
});
6. The onSave perform is triggered when the person clicks the “Save” button. It receives a JSON object containing the signature information, person ID, and timestamp. The JSON construction appears to be like like this:
$('#signpad').SignPad({
onSave : async (postData) => {
console.log("Signature saved with information:", postData);
// ship the signature to the server
await fetch('/save-signature', {
methodology: 'POST',
physique: JSON.stringify(postData),
headers: { 'Content material-Sort': 'utility/json' }
});
}
});
{
"userId": 123,
"signature": "information:picture/png;base64,...",
"timestamp": "2024-09-25 20:30:12"
}
7. Extra callback features:
$('#signpad').SignPad({
onInit : async () => {},
onError : async () => {},
onStartDrawing : async () => {},
onEndDrawing : async () => {},
onReachedMinStroke : async () => {},
onClear : async () => {},
onUndo : async () => {},
onOrientationChange : async () => {},
onDrawing : async () => {},
onDownload : async () => {},
});
8. The plugin additionally offers buttons and corresponding features for undoing the final motion and clearing the canvas:
// Undo
$('#undo').click on();
// Clear
$('#clear').click on();
How SignPad Works:
Initialization: The plugin initializes a canvas aspect with specified dimensions and styling. It additionally units up occasion listeners for mouse and contact occasions to seize person enter.
Drawing: When the person begins drawing, the plugin captures the mouse or contact coordinates and makes use of them to attract strains on the canvas.
Undo Performance: Every drawing motion is saved as a snapshot of the canvas. Clicking “Undo” restores the earlier snapshot, successfully eradicating the final line drawn.
Clear Performance: Clicking “Clear” clears your entire canvas context, resetting the drawing space.
Save Performance: Clicking “Save” converts the canvas content material right into a PNG information URL. This information, together with the person ID and timestamp, is packaged right into a JSON object and despatched to the server utilizing a fetch request (or another methodology you outline within the onSave perform).
Changelog:
2024-09-26
- Bugfixes
- Added extra callbacks
This superior jQuery plugin is developed by badursun. For extra Superior Usages, please test the demo web page or go to the official web site.
