[canvas] Multiples signatures dans un formulaire

**apicultrice** · 01/01/2022, 16h11

Bonjour,

Je désire créer 2 zones de dessin dans un formulaire et sauvegarder les images
J'ai réussi à créer une zone de dessin avec "Clear"
La 2eme ne fonctionne pas ainsi que la partie "save"

Nom : Capture.JPG
Affichages : 272
Taille : 22,6 Ko

Nom : Capture.JPG
Affichages : 272
Taille : 22,6 Ko

Voici mon code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Rucher Montminois</title>
  <link rel="stylesheet" href="styles_hiver.css" type="text/css" media="screen" />
  <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  <script src="../js/signature.js"></script>
  <script src="../js/signature1.js"></script>
  <link rel="icon" type="image/png" href="favicon.png" />  
</head>
......
......
<tr> 
                          <td rowspan="5" width="30%" height=50 align="center"><b>Signature des conducteurs</b></td> 
                          <td width="35%" align="center"><b>Matin</b></td> 
                          <td width="35%" align="center"><b>Après-midi</b></td> 
 
                      </tr> 
                      <tr>
                          <td width="35%" align="center"><div id="canvas"><script type="text/javascript">Signature.capture();</script></div></td>  
                          <td width="35%" align="center"><div id="canvas1"><script type="text/javascript">Signature1.capture();</script></div></td> 
                      </tr>     
                      <tr>
                          <td width="35%" align="center"><button type="button" onclick="Signature.clear()">Clear Signature matin</button></td>  
                          <td width="35%" align="center"><button type="button" onclick="Signature1.clear()">Clear Signature AM</button></td> 
                      </tr>                           
                  </Table>            
                  <br />                                                                                                                                                                                                                                     
                  <p><b>Validation: </b><input type="submit" value="Valider" ></p> 
              </form>

La parie signature.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
var Signature = (function () {
   var empty = true;
   return {
      //public functions
      capture: function (){
         var parent = document.getElementById("canvas" );
         parent.childNodes[0].nodeValue = "";
         var canvasArea = document.createElement("canvas" );
         canvasArea.setAttribute("id", "newSignature" );
         parent.appendChild(canvasArea);
         var canvas = document.getElementById("newSignature" );
         var context = canvas.getContext("2d" );
         if (!context) {
            throw new Error("Failed to get canvas' 2d context" );
         }
 
 
         canvas.width =250;         
         canvas.height = 70;           
 
         context.fillStyle = "#fff";
         context.strokeStyle = "#444";
         context.lineWidth = 1.2;
         context.lineCap = "round";
         context.fillRect(0, 0, canvas.width, canvas.height);
         context.fillStyle = "#3a87ad";
         context.strokeStyle = "#3a87ad";
         context.lineWidth = 1;   
         context.stroke();
         context.fillStyle = "#fff";
         context.strokeStyle = "#444";
         var disableSave = true;
         var pixels = [];
         var cpixels = [];
         var xyLast = {};
         var xyAddLast = {};
         var calculate = false;
         //functions
         {
            function remove_event_listeners() {
               canvas.removeEventListener('mousemove', on_mousemove, false);
               canvas.removeEventListener('mouseup', on_mouseup, false);
               canvas.removeEventListener('touchmove', on_mousemove, false);
               canvas.removeEventListener('touchend', on_mouseup, false);
               document.body.removeEventListener('mouseup', on_mouseup, false);
               document.body.removeEventListener('touchend', on_mouseup, false);
            }
            function get_board_coords(e) {
               var x, y;
               if (e.changedTouches && e.changedTouches[0]) {
                  var offsety = canvas.offsetTop || 0;
                  var offsetx = canvas.offsetLeft || 0;
                  x = e.changedTouches[0].pageX - offsetx;
                  y = e.changedTouches[0].pageY - offsety;
               } else if (e.layerX || 0 == e.layerX) {
                  x = e.layerX;
                  y = e.layerY;
               } else if (e.offsetX || 0 == e.offsetX) {
                  x = e.offsetX;
                  y = e.offsetY;
               }
               return {
                  x : x,
                  y : y
               };
            };
            function on_mousedown(e) {
               e.preventDefault();
               e.stopPropagation();
               canvas.addEventListener('mousemove', on_mousemove, false);
               canvas.addEventListener('mouseup', on_mouseup, false);
               canvas.addEventListener('touchmove', on_mousemove, false);
               canvas.addEventListener('touchend', on_mouseup, false);
               document.body.addEventListener('mouseup', on_mouseup, false);
               document.body.addEventListener('touchend', on_mouseup, false);
               empty = false;
               var xy = get_board_coords(e);
               context.beginPath();
               pixels.push('moveStart');
               context.moveTo(xy.x, xy.y);
               pixels.push(xy.x, xy.y);
               xyLast = xy;
            };
            function on_mousemove(e, finish) {
               e.preventDefault();
               e.stopPropagation();
               var xy = get_board_coords(e);
               var xyAdd = {
                  x : (xyLast.x + xy.x) / 2,
                  y : (xyLast.y + xy.y) / 2
               };
               if (calculate) {
                  var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                  var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                  pixels.push(xLast, yLast);
               } else {
                  calculate = true;
               }
               context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
               pixels.push(xyAdd.x, xyAdd.y);
               context.stroke();
               context.beginPath();
               context.moveTo(xyAdd.x, xyAdd.y);
               xyAddLast = xyAdd;
               xyLast = xy;
            };
            function on_mouseup(e) {
               remove_event_listeners();
               disableSave = false;
               context.stroke();
               pixels.push('e');
               calculate = false;
            };
         }
         canvas.addEventListener('mousedown', on_mousedown, false);
         canvas.addEventListener('touchstart', on_mousedown, false);
      },
      save : function(){
         var canvas = document.getElementById("newSignature" );
         // save canvas image as data url (png format by default)
         var dataURL = canvas.toDataURL("image/png" );
         document.getElementById("saveSignature" ).src = dataURL;
      },
      clear : function(){
         var parent = document.getElementById("canvas" );
         var child = document.getElementById("newSignature" );
         parent.removeChild(child);
         empty = true;
         this.capture();
      },
   }
})()
var Signature;

La partie signature1.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
var Signature1 = (function () {
   var empty = true;
   return {
      //public functions
      capture: function (){
         var parent = document.getElementById("canvas1" );
         parent.childNodes[0].nodeValue = "";
         var canvasArea1 = document.createElement("canvas1" );
         canvasArea1.setAttribute("id", "newSignature1" );
         parent.appendChild(canvasArea1);
         var canvas1 = document.getElementById("newSignature1" );
         var context1 = canvas1.getContext("2d" );
         if (!context1) {
            throw new Error("Failed to get canvas1' 2d context" );
         }
 
 
         canvas1.width =250;         
         canvas1.height = 70;           
 
         context.fillStyle = "#fff";
         context.strokeStyle = "#444";
         context.lineWidth = 1.2;
         context.lineCap = "round";
         context.fillRect(0, 0, canvas1.width, canvas1.height);
         context.fillStyle = "#3a87ad";
         context.strokeStyle = "#3a87ad";
         context.lineWidth = 1;   
         context.stroke();
         context.fillStyle = "#fff";
         context.strokeStyle = "#444";
         var disableSave = true;
         var pixels = [];
         var cpixels = [];
         var xyLast = {};
         var xyAddLast = {};
         var calculate = false;
         //functions
         {
            function remove_event_listeners() {
               canvas1.removeEventListener('mousemove', on_mousemove, false);
               canvas1.removeEventListener('mouseup', on_mouseup, false);
               canvas1.removeEventListener('touchmove', on_mousemove, false);
               canvas1.removeEventListener('touchend', on_mouseup, false);
               document.body.removeEventListener('mouseup', on_mouseup, false);
               document.body.removeEventListener('touchend', on_mouseup, false);
            }
            function get_board_coords(e) {
               var x, y;
               if (e.changedTouches && e.changedTouches[0]) {
                  var offsety = canvas1.offsetTop || 0;
                  var offsetx = canvas1.offsetLeft || 0;
                  x = e.changedTouches[0].pageX - offsetx;
                  y = e.changedTouches[0].pageY - offsety;
               } else if (e.layerX || 0 == e.layerX) {
                  x = e.layerX;
                  y = e.layerY;
               } else if (e.offsetX || 0 == e.offsetX) {
                  x = e.offsetX;
                  y = e.offsetY;
               }
               return {
                  x : x,
                  y : y
               };
            };
            function on_mousedown(e) {
               e.preventDefault();
               e.stopPropagation();
               canvas1.addEventListener('mousemove', on_mousemove, false);
               canvas1.addEventListener('mouseup', on_mouseup, false);
               canvas1.addEventListener('touchmove', on_mousemove, false);
               canvas1.addEventListener('touchend', on_mouseup, false);
               document.body.addEventListener('mouseup', on_mouseup, false);
               document.body.addEventListener('touchend', on_mouseup, false);
               empty = false;
               var xy = get_board_coords(e);
               context.beginPath();
               pixels.push('moveStart');
               context.moveTo(xy.x, xy.y);
               pixels.push(xy.x, xy.y);
               xyLast = xy;
            };
            function on_mousemove(e, finish) {
               e.preventDefault();
               e.stopPropagation();
               var xy = get_board_coords(e);
               var xyAdd = {
                  x : (xyLast.x + xy.x) / 2,
                  y : (xyLast.y + xy.y) / 2
               };
               if (calculate) {
                  var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                  var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                  pixels.push(xLast, yLast);
               } else {
                  calculate = true;
               }
               context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
               pixels.push(xyAdd.x, xyAdd.y);
               context.stroke();
               context.beginPath();
               context.moveTo(xyAdd.x, xyAdd.y);
               xyAddLast = xyAdd;
               xyLast = xy;
            };
            function on_mouseup(e) {
               remove_event_listeners();
               disableSave = false;
               context.stroke();
               pixels.push('e');
               calculate = false;
            };
         }
         canvas1.addEventListener('mousedown', on_mousedown, false);
         canvas1.addEventListener('touchstart', on_mousedown, false);
      },
      save : function(){
         var canvas1 = document.getElementById("newSignature1" );
         // save canvas image as data url (png format by default)
         var dataURL = canvas1.toDataURL("image/png" );
         document.getElementById("saveSignature1" ).src = dataURL;
      },
      clear : function(){
         var parent = document.getElementById("canvas1" );
         var child = document.getElementById("newSignature1" );
         parent.removeChild(child);
         empty = true;
         this.capture();
      },
   }
})()
var Signature1;

Voilà j'ai pas beaucoup d'expérience en JS
Qui peut m'aider ?
A+

**jreaux62** · 01/01/2022, 16h43

Bonne Année aussi...

Peut-être plus facile à utiliser :

https://www.cssscript.com/smooth-signature-canvas-pad/ (démo)

**apicultrice** · 01/01/2022, 17h39

Oui c'est pas mal mais je suis en linux sur un Raspberry

**apicultrice** · 02/01/2022, 20h13

La partie "Matin" fonctionne correctement avec sa sauvegarde

Reste à gérer la partie "AM"
La partie signature1.js ne fonctionne pas

Pas de dessin possible dans la zone

Il ya certainement un conflit en signature.js et signature1.js

Qu'en pensez vous ?

**jreaux62** · 02/01/2022, 22h09

Envoyé par apicultrice

...je suis en linux sur un Raspberry

Oui... et donc ?...

Voir :

https://codepen.io/jreaux62/pen/RwLMdYJ

**NoSmoking** · 03/01/2022, 18h13

Bonjour,
j'entrevois plusieurs erreurs dans ton code et pas mal de maladresses :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var canvasArea1 = document.createElement("canvas1" );

canvas1 n'est pas un élément standard, le « remplaceAll » a été troup loin

Tu récupères var context1 = canvas1.getContext("2d" ); mais tu utilises context dans la suite du code !

Rien que cela mérites que tu regardes de plus près ton code.

Optimisation :
quand on écrit plusieurs fonctions qui se ressemble il est souhaitable de factoriser celles-ci en passant des paramètres.

A toutes fins utiles, une discussion qui pourrait t'intéresser : Canvas signature (Js pur - POO)

**apicultrice** · 04/01/2022, 07h38

Exactement NoSmoking pour canvas1 qui est un objet canvas

Pour le reste j'ai utilisé la console pour corriger mes erreurs et cela fonctionne

Encore merci pour l'aide

**NoSmoking** · 04/01/2022, 14h07

Tu as optimisé pour n'avoir qu'une fonction ?

**apicultrice** · 04/01/2022, 17h42

Pas encore

[canvas] Multiples signatures dans un formulaire

JavaScript

Discussions similaires

Partager

Partager