Avoir plusieurs balises canvas droppables sur la même page

Version imprimable

Bonjour, je voudrais savoir si il est possible d'avoir plusieurs balise canvas droppable sur la même page. Je peux pouvoir déplacé une photo sur la balise canvas et lui appliqué un traitement en javascript et php. Mon but est d'avoir 8 balises canvas avec une récupération de la remarque, numéros de machine et un autre élément. Chaque photo aura une remarque déférente mais le numéros de machine sera identique. Une fois ma photo chargé et tous les éléments présent, je ferais un traitement en php pour réduire la taille et appliqué le numéros de remarque sur la photo avec xhr puis avec json je récupère chez photo pour affiché dans la balise canvas afin de dessiné une cercle sur emplacement de la remarque. Une fois cela fini, la photo sera transformé en image base 64 puis affecté à une balise input invisible.

Mon code fonctionne du moment que je n'ai qu'une balise canvas mais plus quand j'en ai plusieurs et je vois pas comment faire pour que sa marche

Voilà mon code html:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Drag and drop avec canvas</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
</head>
<body>
 
<div id="equipement">
<label for="N_equipement">Num&eacute;ros de l'&eacute;quipement : </label>
<input type="text" name="numeros_machine" size="60" id="N_equipement"/>
</div>
 
<div id="date">
<label>Date : </label>
<input type="text" id="datepicker" size="30" />
</div>
 
<div id="photo_1">
	<canvas id="canvas_1" class="drop" width="242" height="182"></canvas>
	<div id="c_remarque">
		<select name="remarque_choix_1" id="r_ch_1">
			<option></option>
			<option id="ph1_r_1" value="r1">Remarque 1</option>
			<option id="ph1_r_2" value="r2">Remarque 2</option>
			<option id="ph1_r_3" value="r3">Remarque 3</option>
			<option id="ph1_r_4" value="r4">Remarque 4</option>
			<option id="ph1_r_5" value="r5">Remarque 5</option>
		</select>
	</div>
	<div id="bouton">
		<input type="button" id="valide_img_1" value="Envoyer la photo" disabled="disabled">
		<input type="button" id="cercle_1" value="Tracer un cercle" disabled="disabled" />
	</div>
	<input id="image64_1" type="hidden" name="photo_1" value="" />
</div>
 
<div id="photo_2">
	<canvas id="canvas_2" class="drop" width="242" height="182"></canvas>
	<div id="c_remarque">
		<select name="remarque_choix_2" id="r_ch_">
			<option></option>
			<option id="ph2_r_1" value="r1">Remarque 1</option>
			<option id="ph2_r_2" value="r2">Remarque 2</option>
			<option id="ph2_r_3" value="r3">Remarque 3</option>
			<option id="ph2_r_4" value="r4">Remarque 4</option>
			<option id="ph2_r_5" value="r5">Remarque 5</option>
		</select>
	</div>
	<div id="bouton">
		<input type="button" id="valide_img_2" value="Envoyer la photo" disabled="disabled">
		<input type="button" id="cercle_2" value="Tracer un cercle" disabled="disabled" />
	</div>
	<input id="image64_2" type="hidden" name="photo_2" value="" />
</div>
 
<script type="text/javascript" src="js/drag_and_drop.js"></script>
 
</body>
</html>

Mon 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
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
for(var r=1;r<3;r++)
{
var cercle = document.getElementById("valide_img_" + r);
var valide = document.getElementById("cercle_" + r);
cercle.disabled = true;
valide.disabled = true;
}
 
var dropper = document.querySelector("#canvas_1");
console.log(dropper);
 
var context = dropper.getContext('2d');
context.font = "bold 13pt Comic sans MS, Arial";
context.fillText("Déposer la photo ici !!", 25, 95);
 
dropper.addEventListener('dragover', function(e)
{
e.preventDefault();
}, false); 
 
dropper.addEventListener('dragenter', function()
{
dropper.style.borderStyle = 'dashed';
dropper.style.backgroundColor = '#c0c0c0';
}, false);
 
dropper.addEventListener('dragleave', function()
{
dropper.style.borderStyle = 'solid';
dropper.style.backgroundColor = '#fff';
}, false);
 
dropper.addEventListener('drop', function(e) {
 
// Traitement des infos avant envoie de la photo
 
    e.preventDefault();
    dropper.style.borderStyle = 'solid';
    dropper.style.backgroundColor = '#fff';
 
    var files = e.dataTransfer.files;
    //console.log(files);
    var id_photo = e.target.parentElement.id;
    var ext_id = id_photo.split('_');
    var id = ext_id[1];
    //console.log(id);
    var file = files[0];
    //console.log(file);
    var nom_fichier = file.name;
    //console.log(nom_fichier);
    var taille_fichier = file.size;
    //console.log(taille_fichier);
    var type = file.type;
    var ext_img = type.split('/');
    var extention = ext_img[1];
    //console.log(extention);
    var numeros = document.getElementById("N_equipement").value; 
    //console.log(numeros);
    num_photo = id.split('_');
    //console.log(num_photo);
    var remarque = document.getElementById('r_ch_' + id).options[document.getElementById('r_ch_' + id).selectedIndex].text
    //console.log(remarque);
 
    context.fillStyle = "#fff";
    context.fillRect(0, 0, 242, 182);
 
    context.font = "bold 10pt Comic sans MS, Arial";
 
    if(numeros == "")
        {context.fillStyle = '#FF0000'; context.fillText("Numéros Absent", 5, 13);}
    else
        {context.fillStyle = '#008000'; context.fillText("Numéros Présent", 5, 13);}
    if(remarque == "")
        {context.fillStyle = '#FF0000'; context.fillText("Remarque non sélectionné", 5, 26);}
    else
        {context.fillStyle = '#008000'; context.fillText("Remarque sélectionné", 5, 26);}
 
    if(nom_fichier == "" && taille_fichier == 0 && extention != "jpeg")
        {context.fillStyle = '#FF0000'; context.fillText("Photo absente", 5, 39);}
    else
        {context.fillStyle = '#008000'; context.fillText("Photo présente", 5, 39);}
 
    if(numeros != "" && remarque != "" && nom_fichier != "" & taille_fichier > 0 && extention == "jpeg")
    {
    var valide = document.getElementById("valide_img_1");
    valide.disabled = false; 
    }
 
// Envoye de la photo à PHP pour traitement
 
    var xhr = new XMLHttpRequest();
 
 
}, false);

20/11/2013, 12h12
NoSmoking

Bonjour,

Citation:

var dropper = document.querySelector("#canvas_1");

cette simple ligne limite tout ton script.

Une récupération via un document.querySelectorAll("canvas") te permettrais d'affecter les événements sur tous tes canvas.
20/11/2013, 17h59
stephcache

oui je sais bien que sa me limite mais sa sait pas comment faire pour que sa choisisse tous mes canvas. Donc ce que tu as écrit même si id des mes balises canvas est canvas_1, canvas_2 .... ?

Effectivement sa me sélectionne bien toute mes balises canvas mais j’obtiens une erreur TypeError: dropper.addEventListener is not a function
}, false);

Attention

Code:

var dropper = document.querySelectorAll('canvas'); // retourne une liste Node

donc il te faut boucler sur cette liste

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
for(i=0, nb=dropper.length; i<nb; i++){
  dropper[i].addEventListener('dragover', function(e){
      e.preventDefault();
    }, false); 
 
  dropper[i].addEventListener('dragenter', function(){
      this.style.borderStyle = 'dashed';        // on utilise this ici qui vaut dropper[i]
      this.style.backgroundColor = '#c0c0c0';
    }, false);
  /*
  la suite des déclarations
  */
}

Effectivement sait plus claire comme sa mais j'ai finalement opté pour un script jquery. Sa marche bien mais un comportement qui ne me conviens pas et je ne vois pas comment faire pour le résoudre. Toute la partie envoyé, traitement, chargement de la photo sait bon sa fait ce que je veux mais quand je veux tracé un cercle sur l'image. J'ai bien le clique sur centre puis le cercle qui ce dessine dans je bouge ma sourie et arrêt de dessiné quand je clique a nouveau. Mon problème sait quand je bouge la sourie au lieu d'avoir un seul cercle qui grandi ou rétréci, j'en ai autant que je bouge la sourie. Je voudrais n'en avoir qu'un seul qui évolue selon le déplacement de ma sourie et qui ce fige quand je clique à nouveau

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
 
for(c=1;c<3;c++)
{
	var cercle = document.getElementById("valide_img_" + c);
	var valide = document.getElementById("cercle_" + c);
	cercle.disabled = true;
	valide.disabled = true;
	var drop = document.querySelector("#canvas_" + c);
	var context = drop.getContext('2d');
	context.font = "bold 13pt Comic sans MS, Arial";
	context.fillText("Déposer la photo ici !!", 25, 95);
	$("#canvas_" + c).css("cursor", "pointer");
}
 
(function(s){
 
$.fn.dropfile = function(o)
{
	this.each
	(
		function()
		{ 
			$(this).bind
			(
				{
					dragenter : function(e)
					{
						e.preventDefault();
						$(this).addClass('hover');
					},
					dragover : function(e)
					{
						e.preventDefault();
						$(this).addClass('hover');
					},
					dragleave : function(e)
					{
						e.preventDefault();
						$(this).removeClass('hover');
					}
				}
			);
 
			this.addEventListener
			(
				'drop',
				function(e)
				{
					$(this).removeClass('hover');
					e.preventDefault();
					console.log(e);
					var photo = e.target.parentElement.id;
					console.log(photo);
					var files = e.dataTransfer.files;
					console.log(files);
					var file = files[0];
    				        console.log(file);
    				        var nom_fichier = file.name;
    				        console.log(nom_fichier);
    				        var taille_fichier = file.size;
    				        console.log(taille_fichier);
    				        var type = file.type;
    				        var ext_img = type.split('/');
    				        var extention = ext_img[1];
    				        console.log(extention);
					var id_canvas = e.target.id;
					console.log(id_canvas);
					var id_remaque = e.target.nextElementSibling.firstElementChild.id;
					console.log(id_remaque);
					var num_equipement = document.getElementById("N_equipement").value;
					console.log(num_equipement);
					var remarque = document.getElementById(id_remaque).options[document.getElementById(id_remaque).selectedIndex].text;
					console.log(remarque);
					var valide = e.target.parentElement.children[2].firstElementChild.id;
					console.log(valide);
					var cercle = e.target.parentElement.children[2].lastElementChild.id;
					console.log(cercle);
 
					var drop = document.querySelector("#" + id_canvas);
					var context = drop.getContext('2d');
    				        context.clearRect(0, 0, 242, 182);
    				        context.font = "bold 10pt Comic sans MS, Arial";
 
    				if(num_equipement == "")
					{context.fillStyle = '#FF0000'; context.fillText("Numéros Absent", 5, 13);}
    				else
        			{context.fillStyle = '#008000'; context.fillText("Numéros Présent", 5, 13);}
 
    				if(remarque == "")
        			{context.fillStyle = '#FF0000'; context.fillText("Remarque non sélectionné", 5, 26);}
    				else
        			{context.fillStyle = '#008000'; context.fillText("Remarque sélectionné", 5, 26);}
 
    				if(nom_fichier == "" && taille_fichier == 0 && extention != "jpeg")
        			{context.fillStyle = '#FF0000'; context.fillText("Photo absente", 5, 39);}
    				else
        			{context.fillStyle = '#008000'; context.fillText("Photo présente", 5, 39);}
 
    				if(num_equipement != "" && remarque != "" && nom_fichier != "" & taille_fichier > 0 && extention == "jpeg")
    				{
    				context.font = "bold 13pt Comic sans MS, Arial";
					context.fillStyle = '#000';
					context.fillText("Cliquer sur Envoyer la photo", 2, 95)
    				var valide_disabled = document.getElementById(valide);
    				valide_disabled.disabled = false;
    				}
    				else
    				{
    				context.font = "bold 13pt Comic sans MS, Arial";
					context.fillStyle = '#000';
					context.fillText("Déposer la photo ici !!", 25, 95);
    				}
 
    				$("#" + valide).click(function() {upload(files,photo,id_canvas,num_equipement,remarque,cercle,valide,$(this));});
				},
				'false'
			);
		}
	);
 
	function upload(files,photo,id_canvas,numeros,remarque,id_cercle,id_valide,area)
	{
		$("#" + id_canvas).css("cursor", "wait");
		var valide_disabled = document.getElementById(id_valide);
		valide_disabled.disabled = true; 
 
		var drop = document.querySelector("#" + id_canvas);
		var context = drop.getContext('2d');
		context.clearRect(0, 0, 242, 182);
		context.font = "bold 13pt Comic sans MS, Arial";
		context.fillStyle = '#000';
		context.fillText("Traitement en cours ...", 25, 95);
 
		var file = files[0];
		var xhr = new XMLHttpRequest();
		//var progress = area.find('.progress');
 
		xhr.open('post', 'upload.php', true);
		xhr.setRequestHeader('content-type', 'multipart/form-data');
		xhr.setRequestHeader('x-file-type', file.type);
		xhr.setRequestHeader('x-file-size', file.size);
		xhr.setRequestHeader('x-file-name', file.name);
		xhr.setRequestHeader('photo', photo);
		xhr.setRequestHeader('num_machine', numeros);
		xhr.setRequestHeader('num_remarque', remarque);
		xhr.send(file);
 
		xhr.addEventListener
		(
			'load',
			function(e)
			{
				$("#" + id_canvas).css("cursor", "pointer");
				var drop = document.querySelector("#" + id_canvas);
				var context = drop.getContext('2d');
				var nom_fichier = jQuery.parseJSON(e.target.responseText);
				console.log(nom_fichier.nom);
				var image = new Image();
				image.src = 'photo/' + photo +'/'+ nom_fichier.nom;
				image.onload = function()
				{
					context.drawImage(this,0,0,242,182);
					var cercle = document.getElementById(id_cercle);
					cercle.disabled = false; 
 
					$("#" + id_cercle).click(
					function()
					{
					$("#" + id_canvas).css("cursor", "crosshair");
					cercle.disabled = true;
 
						function ellipce(x, y, r, taille)
						{
							context.restore();
							//context.save();
							context.lineWidth = taille;
    						//context.scale(1,y/x);
    						context.beginPath();
    						context.arc(x, y, r, 0, 2 * Math.PI);
   							context.strokeStyle = "#f00";
    						context.stroke();
    						context.save();
    						//context.restore();
						}
 
						function calcule(click_x, click_y, dep_x, dep_y)
						{
							var long_x = click_x - dep_x;
							var long_y = click_y - dep_y;
							var carre_x = long_x * long_x;
							var carre_y = long_y * long_y;
							var z = Math.round(Math.sqrt(carre_x + carre_y));
							window.rayon = z;
						}
 
						$('#' + id_canvas).on("click", click_centre);
						$('#' + id_canvas).on("click", click_rayon);
 
						$('#' + id_canvas).off("click", click_rayon);
 
						//$('#' + id_canvas).on("mousedown", clique);
						$('#' + id_canvas).on("mousemove", deplace);
						//$('#' + id_canvas).on("mouseup", lache);
 
						$('#' + id_canvas).off("mousemove", deplace);
 
						var pos_canvas = $('#' + id_canvas).offset();
						//console.log(pos_canvas);
 
						function click_centre(event)
						{
							var F_posXclick = event.clientX;
							var F_posYclick = event.clientY;
							var C_posXclick = F_posXclick - pos_canvas.left;
							var C_posYclick = F_posYclick - pos_canvas.top;
							console.log('Sur clique centre : ' + C_posXclick + ' - ' + C_posYclick);
							window.pos_X_centre = C_posXclick;
							window.pos_Y_centre = C_posYclick;
							$('#' + id_canvas).on("click", click_rayon);
							$('#' + id_canvas).off("click", click_centre);
							$('#' + id_canvas).on("mousemove", deplace);
						}
 
						function deplace(event)
						{
							var F_posXdeplace = event.clientX;
							var F_posYdeplace = event.clientY;
							var C_posXdeplace = F_posXdeplace - pos_canvas.left;
							var C_posYdeplace = F_posYdeplace - pos_canvas.top;
							console.log('Sur deplacement : ' + C_posXdeplace + ' - ' + C_posYdeplace);
							calcule(pos_X_centre, pos_Y_centre, C_posXdeplace, C_posYdeplace);
							ellipce(pos_X_centre, pos_Y_centre, rayon, 1);
						}
 
						function click_rayon(event)
						{
							var F_posXclick = event.clientX;
							var F_posYclick = event.clientY;
							var C_posXclick = F_posXclick - pos_canvas.left;
							var C_posYclick = F_posYclick - pos_canvas.top;
							console.log('Sur clique rayon : ' + C_posXclick + ' - ' + C_posYclick);
							window.pos_X_rayon = C_posXclick;
							window.pod_Y_rayon = C_posYclick;
							$('#' + id_canvas).off("click", click_rayon);
							$('#' + id_canvas).off("click", click_centre);
							$('#' + id_canvas).off("mousemove", deplace);
						}
 
						/*function clique(event)
						{
							var posXclick = event.clientX;
							var posYclick = event.clientY;
							window.posXclick = posXclick;
							window.posYclick = posYclick;
							console.log('Sur clique : ' + posXclick + ' - ' + posYclick);
							$('#' + id_canvas).on("mousemove", deplace);
						}*/
 
						/*function lache(event)
						{
							console.log(posXclick + ' - ' + posYclick + ' - ' + posXdeplace + ' - ' + posYdeplace);
							console.log(pos_canvas.left + ' - ' + pos_canvas.top);
							calcule(posXclick,posYclick,posXdeplace,posYdeplace);
							ellipce(canvasX, canvasY, rayon, false);
							$('#' + id_canvas).off("mousemove", deplace);
						}*/
 
 
 
 
 
 
 
					});
 
						/*var data = a.toDataURL();
						var image_b64 = data.substr(22);
						a = id.split('_');
						document.getElementById('image64_' + a[1]).value = image_b64;
 
						ar xhr = new XMLHttpRequest();
						xhr.open('post', './formulaire_arc_flach/upload_64.php', true);
						var form = new FormData();
						form.append('image64', data);
						form.append('dossier', id);
						form.append('nom_photo', nom_fichier.nom);
						xhr.send(form);*/
 
				};
			},
			false
		);
		//xhr.upload.addEventListener
		//(
		//	'progress',
		//	function(e)
		//	{
		//		if(e.lengthComputable)
		//		{
		//			var perc = (Math.round(e.loaded/e.total) * 100)+ '%';
		//			progress.css({width:perc}).html(perc);
		//		}
		//	},
		//	false
		//);
	}
}
 
})(jQuery);

07/12/2013, 13h32
Invité

c'est normale a chaque fois un cercle est redessiné dans le canvas il faudrait sauvegarder l'etat du canvas dans une variable et a chaque fois que l'on dessine le cercle on reinsere l'etat du canvas.
07/12/2013, 14h08
stephcache

ok sait le seule façon de faire ?

Si je comprend bien je dois enregistré état du mon canvas avant que de trace mon cercle et que je insert l'état sauvegardé.

Il faut que utilise cette fonction pour sauvegardé l'état du canvas ?

Je suppose qu'il faut que je la affiche de nouveau juste après la fonction context.clearRect(0, 0, 242, 182); qui est dans ma fonction ellipse ?

Je vois pas comment affiché de nouveau !

sauvegarde le canvas en image
Code:

1 2 3 var copie_canvas=new Image(); copie_canvas.src=document.getElementById('cs').toDataURL("image/png");
et dans la fonction qui cree le cercle inserre l'image avant le cercle et pas besoin de faire un clearRect car l'image recouvrera le canvas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function ellipce(x, y, r, taille) { context.restore(); context.drawImage(copie_canvas,0,0); //context.save(); context.lineWidth = taille; //context.scale(1,y/x); context.beginPath(); context.arc(x, y, r, 0, 2 * Math.PI); context.strokeStyle = "#f00"; context.stroke(); context.save(); //context.restore(); }

07/12/2013, 18h10
stephcache

super ton idée sa marche nikel, j'ai juste remplacé cs par id_canvas mais sinon sa marche bien. Merci de ton aide