Signature manuscrite tablette
Bonjour a tous. Je requiers votre aide sur un soucis que je rencontre au boulot.
Je vais essayer d'être clair.
Je développe un outils permettant de créer des rapport d'interventions lors de nos déplacements extérieurs.
Je développe en html css, avec du js en cas de besoin.
Notre société utilise comme logiciels de developpement pour nos appli métier OPENEDGE PROGRESS (pour ceux qui connaissent).
Mon appli tourne correctement, mais je bute sur un point.
Je souhaite à la fin du rapport demander une signature sur ipad.
J'y arrive (d'un sens) avec le code fourni ici: https://github.com/szimek/signature_pad
J'ai réussi à adapter le code pour mon utilisation (sous webspeed pour ceux qui connaissent)
Mon fonctionnement est le suivant: signature coté client sur tablette, envoi des données, puis traitement côté serveur.
Le premier soucis est qu'avec le logiciel que l'on utilise, on ne peux envoyer que des "petites" variables. Sur tablette le js permettant designer créer des variables de
40 - 50000 caractères en base64, ce qui me renvoi des message d'erreur côté serveur. Donc première chose, j'ai découpé ma variable en plusieurs de max 10000 caractères.
Ensuite, côté serveur, je ne peux pas enregistrer des champs trop volumineux dans ma base, donc je me suis dit que j'allai recréer une image en PNG de la signature.
Pour ce, je mets toutes mes variables dans un fichier .txt pour recréer le code en base64.
Ensuite, sur ubuntu, je fais la commande base64 -d toto2.txt > toto.png, pour générer mon png à partir du txt.
Le soucis que je rencontre est le suivant : pour des signature ne dépassant pas 10000 caractères cela fonctionne, mais au dela l'image à cette allure:
Pièce jointe 172400
les 10000 premiers caractères (variable1) sont correctement interprêtés et l'image est nickel, mais ensuite le reste est retranscrit "brouillé".
Pour info : base 64 me renvoi ceci : base64: invalid input
Code js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Veuillez signer dans la Zone Blanche");
} else {
/*La fonction windows open sert a afficher à l'ecran une variable*/
/*window.open(signaturePad.toDataURL()); */
/*lenght sert à compter le nombre de caractère dans une chaine*/
lg = (signaturePad.toDataURL()).length;
alert(lg);
$('#signature1').val(signaturePad.toDataURL().substr(0,10000));
$('#signature2').val(signaturePad.toDataURL().substr(10001,20000));
$('#signature3').val(signaturePad.toDataURL().substr(20001,30000));
$('#signature4').val(signaturePad.toDataURL().substr(30001,40000));
$('#signature5').val(signaturePad.toDataURL().substr(40001,50000));
$('#lg').val(lg);
/*$('#signature1').val(signaturePad.toDataURL());*/
$('#exec_prev').submit();
}
}); |
J'espère avoir été clair!
A bientôt.
