L'utilisateur cliquer sur un bouton "signature" qui ouvre une boite modal.
De là on affiche un canvas où l'utilisateur va pouvoir signer.
Partant de là, je suis confronté à un souci c'est qu'il m'est impossible de signer si je ne fais pas F12.
En me renseignant, il me semble qu'il faudrait initialiser le canvas : signature = new Signature(canvas); au moment de l'ouverture de la boite modal mais cela ne fonctionne pas.
Donc si je résume j'ai actuellement 4 fichiers :
- La page html ou l'on affiche le tout
- Un Js avec tout ce qui concerne les boites modal :
$('.simplemodal-open').click(function(){
var nom = document.getElementById("nom").value;
if(nom !== ''){
$("#sample").modal({
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
$.modal.close();
});
});
});
}});
}else {
alert('Impossible');
}
});
- 2 Js pour ce qui concerne la signature
var wrapper = document.getElementById("signature"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
returnButton = wrapper.querySelector("[data-action=return]"),
statButton = wrapper.querySelector("[data-action=stat]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
signature = new Signature(canvas);
clearButton.addEventListener("click", function (event) {
signature.clear();
});
saveButton.addEventListener("click", function (event) {
if (signature.isEmpty()) {
alert("Veuillez signer avant d'enregistrer");
} else {
var nom = document.getElementById("nom").value;
var signatureF = signature.toDataURL();
//window.open(signature.toDataURL());
$.ajax({
type:"POST",
url: /Ajax/validSignature/",
data : {"Nom":nom,"Signature":signatureF},
dataType: "json",
success: function(data) {
alert("sa fonctionne");
}
});
}
signature.clear();
});
L'autre fichier étant le plugin de la signature
Est-ce que c'est plus clair?
C'est dans l'unité que nous vaincrons les ténèbres
C'est dans l'unité que nous vaincrons les ténèbres
Signature Canvas refresh
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.