Discussion :

[coincoin22]

Bonsoir,

J'ai un souci et je vais devenir fou ;-)

Voilà j'ai créé un "canvas" permettant de dessiner puis d'en faire une sauvegarde sur un serveur.

La structure de ma page est la suivante

1- Mon canvas
2- Un formulaire permettant de donner son nom, sa classe et un message qui est envoyé dans une base de données.

Ma fonction javascript (ajax):

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
function exportAndSaveCanvas()  {
 
	// Get the canvas screenshot as PNG
	var screenshot = Canvas2Image.saveAsPNG(canvas, true);
 
	// This is a little trick to get the SRC attribute from the generated <img> screenshot
	canvas.parentNode.appendChild(screenshot);
	screenshot.id = "canvasimage";		
	data = $('#canvasimage').attr('src');
	canvas.parentNode.removeChild(screenshot);
 
	// Send the screenshot to PHP to save it on the server
	var url = 'paint/export_paint.php';
	$.ajax({ 
	    type: "POST", 
	    url: url,
	    dataType: 'text',
	    data: {
	        base64data : data
	    }
	});
}

Et mon formulaire:

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
30
31
32
33
34
35
<form action="#error" method="POST" name="envoiemail" id="envoiemail";>
  <table width="660" border="0" align="center">
    <tr>
      <td><div align="center"><strong>Nom/Prénom</strong></div></td>
      <td><input name="nom" type="text" id="nom"><br/><br/></td>
    </tr>
    <tr>
      <td><div align="center"><strong>Classe</strong></div></td>
      <td><input name="classe" id="classe"><br/><br/></td>
    </tr>
     <tr>
	<td style="display:none;"><input name="mail" id="mail"><br/><br/></td>
    </tr>
 
    <tr>
	<td style="vertical-align:middle;text-align:center;"><strong>Message</br> <input readonly type=text name="indicateur" id="indicateur" size="3" maxlength=2 style="text-align: center;" value="50"></input></strong></td>
	 <td><textarea name="message" cols="30" rows="5" onKeyDown="limiteur();" onKeyUp="limiteur();"></textarea></td>
 
 
    </tr>
 
 
 
    <tr>
      <td height="26"><div align="center"></div></td>
      <td><p>
 
	<input id="save" type="button" onClick="exportAndSaveCanvas();this.form.submit();" value="Sauvegarder">
 
</p>      </td>
    </tr>
  </table>
		</div>
 
</form>

Oui je sais y'a des balises table... mais je suis un novice ! Tant que ça fonctionne

Le problème est dans la partie du formulaire:

Code html :

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

<input id="save" type="button" onClick="exportAndSaveCanvas();this.form.submit();" value="Sauvegarder">

Le fichier png est bien enregistré à chaque fois SI je retire ce code

Code :

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

this.form.submit();

Sinon, c'est 1 coup sur 10 !!

Testé en local et sur le net !

Je ne comprends pas pourquoi ??

Pouvez-vous m'aider à trouver le problème !

Merci

coincoin22

[Watilin]

En fait tu as trouvé le truc qui cloche : le submit. Soumettre un formulaire c'est comme cliquer sur un lien : ton navigateur va quitter la page actuelle et en charger une nouvelle. Du coup ça annule la requête Ajax qui était en cours pour enregistrer ton image. Si ça marche 1 fois sur 10 c'est parce que des fois, la soumission du formulaire se fait moins vite et/ou le chargement de l'image plus rapide, et la requête Ajax a le temps de se terminer.

Ce que tu dois faire, comme tout bon débutant en Ajax, c'est apprendre à utiliser les fonctions de rappels. Ce n'est pas compliqué, c'est juste une fonction que tu définis mais qui n'est pas appelée tout de suite ; elle est appelée quad la requête se termine.

Avec jQuery, c'est hyper simple : tu la colles sur le paramètre success de ton appel à .ajax. Pour être plus clair :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$.ajax({ 
	type: "POST", 
	url: url,
	dataType: 'text',
	data: {
		base64data : data
	},
	success: function() {
		$("#envoiemail").submit();
	}
});

Tu peux même peaufiner les détails en mettant un petit indicateur d'attente pendant le chargement de l'image. Ca fait une sorte de « retour visuel » pour l'utilisateur, histoire qu'il n'ait pas l'impression qu'il ne se passe rien. Ta fonction de rappel se chargera alors aussi de retirer l'indicateur. C'est une pratique courante avec Ajax.

[coincoin22]

Merci pour ta réponse ! C'est très clair ! ça marche mieux !

Mais j'ai un autre problème. Je ne maîtrise pas encore tout !

- Les images sont bien uploadées correctement. Via un fichier externe php je leur colle la date et heure comme nom.

Code php :

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

1
2
3
4
5
6
7
<?php	
	$data = $_REQUEST['base64data'];
	echo $data;
	$date=date('d_m_Y_H_i_s');
	$image = explode('base64,',$data); 
	file_put_contents("paint_".$date.".png", base64_decode($image[1]));
?>

Mais, ensuite, il y a le "submit" or dans ma requête SQL, je rentre aussi en base la date dans la base sql, le nom du dessinateur...

Mais il se peut que les 2 dates soient différentes (1 seconde près), et donc je ne retrouve pas mes "petits" !

Peut-on transmettre via ajax les valeurs du formulaire au fichier php qui ensuite gérera à lui seul 1 seule date (nommage png + SQL) ?

Merci de ton aide ! Je n'ai jamais fait de l'ajax ! Il faudra bien que je m'y mettes j'ai l'impression !

coincoin22

[Watilin]

Effectivement, tu vas avoir de grosses difficulté à rassembler tes données si tu les envoie en plusieurs requêtes séparées. La solution la plus simple à mon avis, c'est de tout faire passer par Ajax.

Pour ce faire, il faut que tu récupères toutes les valeurs de tes champs de formulaire. Avec jQuery, ça se fait en appelant .serialize(), qui te renvoie une chaîne préparée sous la forme "name1=value1&name2=value2&...". Tu n'as plus qu'à y ajouter ton base64data et envoyer le tout :

Code :

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

1
2
3
4
5
6
7
8
9
$.ajax({ 
	type: "POST", 
	url: url,
	dataType: 'text',
	data: $("#envoiemail").serialize() + "&base64data=" + data,
	success: function() {
		// indiquer à l'utilisateur que le traitement a réussi
	}
});

http://api.jquery.com/serialize/

[coincoin22]

Merci !

Mon image n'est plus encodée correctement ??! Il doit y avoir un souci...

Sinon, côté PHP pour chaque valeur du formulaire, je les récupères comment ?

Code :

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

1
2
$_REQUEST['base64data'];
$_REQUEST['name1'];

etc...?

Merci de ton aide !

[Watilin]

Comme tu viens de l'écrire, ou alors avec $_POST. Étant donné que tu sais que la requête arrive en POST, c'est plus sûr d'utiliser $_POST plutôt que $_REQUEST.