[canvas] Multiples signatures dans un formulaire

1 pièce(s) jointe(s)

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"

Pièce jointe 611104

Voici mon code:

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
<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:

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:

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+

Bonne Année aussi... :roll:

Peut-être plus facile à utiliser :

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

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

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 ?

Citation:

Envoyé par apicultrice

...je suis en linux sur un Raspberry

Oui... et donc ?... :weird:

Voir :

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

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

Code:

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)

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

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

Pas encore :(