Signature électronique (Essignature) La capture est essentielle pour de nombreuses applications Web, y compris les contrats, les accords et les formulaires de consentement. Bien que de nombreuses entreprises optent pour des solutions de gestion de documents coûteuses, il est assez simple d’implémenter votre propre champ de signature dans votre page Web.
jseignature
jseignature est une bibliothèque JavaScript open source qui fournit un moyen simple et efficace de capturer, stocker et gérer les signatures numériques dans les applications Web. Il permet aux utilisateurs de signer des documents ou des formulaires à l’aide d’un pavé tactile, d’une souris ou d’un stylet, ce qui le rend très polyvalent pour divers appareils, y compris les ordinateurs de bureau, les tablettes et les smartphones.
La bibliothèque est légère et construite avec Html9 Toile, assurer un rendu et une réactivité en douceur. Il prend en charge plusieurs formats de sortie, tels que SVG, PNGet Jsonpermettant une intégration facile avec les systèmes backend. De plus, JSignature comprend des fonctionnalités telles que la sensibilité à la pression, le lissage des traits et la compression des données, ce qui en fait un choix robuste pour les applications qui nécessitent des signatures électroniques, telles que des contrats, des formulaires de consentement et des processus d’authentification.
Cet article vous guidera tout au long du processus de mise en œuvre jseignature pour accepter une signature en ligne.
Démo JSignature
Voici une démo fonctionnelle de la bibliothèque JSignature. Utilisez simplement votre curseur ou votre doigt pour signer le champ de signature. Lorsque vous cliquez Submitle résultat est affiché pour vous.
Exemple de page JSignature
Cette implémentation simple à l’aide de JSignature permet aux utilisateurs de capturer et de gérer les signatures numériques dans un formulaire Web. Il fournit des fonctionnalités essentielles, y compris le dessin, la compensation et la soumission de signatures au format Base64. En étendant ce script, les développeurs peuvent intégrer des signatures numériques dans les contrats en ligne, les formulaires de consentement et les systèmes d’authentification, améliorant à la fois l’expérience utilisateur et la sécurité.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Capture Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.2/jSignature.min.js"></script>
<style>
#signature {
border: 1px solid #000;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<form id="signature-form">
<h3>Sign Below:</h3>
<div id="signature"></div>
<br>
<button type="button" id="clear-signature">Clear Signature</button>
<input type="hidden" name="signatureData" id="signatureData">
<br><br>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function () {
// Initialize jSignature
$('#signature').jSignature({ 'width': 400, 'height': 200 });
// Clear signature
$('#clear-signature').click(function () {
$('#signature').jSignature("reset");
});
// Handle form submission
$('#signature-form').submit(function (e) {
e.preventDefault();
var signatureData = $('#signature').jSignature("getData", "image"); // Base64 format
$('#signatureData').val(signatureData);
// Example: Log to console (in real use, submit via AJAX or form post)
console.log("Captured Signature Data: ", signatureData);
alert("Signature Captured and Submitted!");
});
});
</script>
</body>
</html>
Vous trouverez ci-dessous une ventilation de la façon dont chaque section du code fonctionne.
1. Configuration de la structure HTML
Le document commence par une structure HTML5 standard, y compris un head Section lorsque les bibliothèques requises sont chargées. Ceux-ci incluent:
- jQuery (v3.6.0): Une bibliothèque JavaScript qui simplifie la manipulation DOM et la gestion des événements.
- JSignature (v2.1.2): Une bibliothèque JavaScript qui permet une capture de signature numérique sur un toile HTML5.
Le body contient un formulaire (#signature-form) avec:
- Une zone de capture de signature (
#signature). - Un bouton «Effacer la signature» pour réinitialiser le champ de signature.
- Une entrée cachée (
#signatureData) pour stocker les données de signature capturées. - Un bouton «Soumettre» pour soumettre le formulaire.
2. Styliser le pavé de signature
Une règle CSS simple est appliquée pour s’assurer que la zone de signature est visible et a une taille définie:
#signature {
border: 1px solid #000;
width: 400px;
height: 200px;
}
Cela garantit que le coussin de signature est de 400px de large et 200px de haut, avec une bordure noire pour la distinguer de l’arrière-plan.
3. Initialisation des interactions JSignature et manipulation
Le script à l’intérieur <script> Tags utilise jQuery pour ajouter un comportement interactif au formulaire:
a) Initialisation du pavé de signature
Une fois le document prêt, JSignature est initialisé sur le #signature Div:
$('#signature').jSignature({ 'width': 400, 'height': 200 });
Cela crée une toile interactive où les utilisateurs peuvent dessiner leurs signatures.
b) effacer la signature
Le bouton «Effacer la signature» réinitialise le champ de signature lorsque vous cliquez:
$('#clear-signature').click(function () {
$('#signature').jSignature("reset");
});
Cela efface toute signature existante, permettant aux utilisateurs de re-signer si nécessaire.
c) capturer et soumettre la signature
Lorsque le formulaire est soumis, la signature est extraite en tant qu’image au format Base64:
var signatureData = $('#signature').jSignature("getData", "image"); // Base64 format
$('#signatureData').val(signatureData);
Les données Base64 sont ensuite stockées dans le champ de saisie caché (#signatureData), qui peut être envoyé à un serveur pour le traitement. À des fins de démonstration, le script enregistre les données de signature capturées à la console et montre une alerte:
console.log("Captured Signature Data: ", signatureData);
alert("Signature Captured and Submitted!");
Ces données seraient envoyées au backend via un Ajax demande ou soumission de formulaire dans une application du monde réel.
mars 11, 2025
JSignature: Comment accepter les direvisures dans un formulaire Web en ligne à l’aide de jQuery
Signature électronique (Essignature) La capture est essentielle pour de nombreuses applications Web, y compris les contrats, les accords et les formulaires de consentement. Bien que de nombreuses entreprises optent pour des solutions de gestion de documents coûteuses, il est assez simple d’implémenter votre propre champ de signature dans votre page Web.
jseignature
jseignature est une bibliothèque JavaScript open source qui fournit un moyen simple et efficace de capturer, stocker et gérer les signatures numériques dans les applications Web. Il permet aux utilisateurs de signer des documents ou des formulaires à l’aide d’un pavé tactile, d’une souris ou d’un stylet, ce qui le rend très polyvalent pour divers appareils, y compris les ordinateurs de bureau, les tablettes et les smartphones.
La bibliothèque est légère et construite avec Html9 Toile, assurer un rendu et une réactivité en douceur. Il prend en charge plusieurs formats de sortie, tels que SVG, PNGet Jsonpermettant une intégration facile avec les systèmes backend. De plus, JSignature comprend des fonctionnalités telles que la sensibilité à la pression, le lissage des traits et la compression des données, ce qui en fait un choix robuste pour les applications qui nécessitent des signatures électroniques, telles que des contrats, des formulaires de consentement et des processus d’authentification.
Cet article vous guidera tout au long du processus de mise en œuvre jseignature pour accepter une signature en ligne.
Démo JSignature
Voici une démo fonctionnelle de la bibliothèque JSignature. Utilisez simplement votre curseur ou votre doigt pour signer le champ de signature. Lorsque vous cliquez
Submitle résultat est affiché pour vous.Exemple de page JSignature
Cette implémentation simple à l’aide de JSignature permet aux utilisateurs de capturer et de gérer les signatures numériques dans un formulaire Web. Il fournit des fonctionnalités essentielles, y compris le dessin, la compensation et la soumission de signatures au format Base64. En étendant ce script, les développeurs peuvent intégrer des signatures numériques dans les contrats en ligne, les formulaires de consentement et les systèmes d’authentification, améliorant à la fois l’expérience utilisateur et la sécurité.
Vous trouverez ci-dessous une ventilation de la façon dont chaque section du code fonctionne.
1. Configuration de la structure HTML
Le document commence par une structure HTML5 standard, y compris un
headSection lorsque les bibliothèques requises sont chargées. Ceux-ci incluent:Le
bodycontient un formulaire (#signature-form) avec:#signature).#signatureData) pour stocker les données de signature capturées.2. Styliser le pavé de signature
Une règle CSS simple est appliquée pour s’assurer que la zone de signature est visible et a une taille définie:
Cela garantit que le coussin de signature est de 400px de large et 200px de haut, avec une bordure noire pour la distinguer de l’arrière-plan.
3. Initialisation des interactions JSignature et manipulation
Le script à l’intérieur
<script>Tags utilise jQuery pour ajouter un comportement interactif au formulaire:a) Initialisation du pavé de signature
Une fois le document prêt, JSignature est initialisé sur le
#signatureDiv:Cela crée une toile interactive où les utilisateurs peuvent dessiner leurs signatures.
b) effacer la signature
Le bouton «Effacer la signature» réinitialise le champ de signature lorsque vous cliquez:
Cela efface toute signature existante, permettant aux utilisateurs de re-signer si nécessaire.
c) capturer et soumettre la signature
Lorsque le formulaire est soumis, la signature est extraite en tant qu’image au format Base64:
Les données Base64 sont ensuite stockées dans le champ de saisie caché (
#signatureData), qui peut être envoyé à un serveur pour le traitement. À des fins de démonstration, le script enregistre les données de signature capturées à la console et montre une alerte:Ces données seraient envoyées au backend via un Ajax demande ou soumission de formulaire dans une application du monde réel.
Source link
Partager :
Articles similaires