Formulaire & Javascript

Version imprimable

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:

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:

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:

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

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

07/03/2013, 00h24
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:

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.
07/03/2013, 09h42
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:

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

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:

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 } });
:fleche: http://api.jquery.com/serialize/

07/03/2013, 20h52
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:

1 2 $_REQUEST['base64data']; $_REQUEST['name1'];
etc...?

Merci de ton aide !
07/03/2013, 20h56
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.

Merci !

Sinon, il doit y avoir un souci à ce niveau:

Code:

"&base64data=" + data

car mon image n'est plus encodé correctement ?!!

C'est très puissant ajax ! J'adore !!!!!

Voilà mon PHP:
Code:

1 2 3 4 5 6 7 8 9 <?php $data = $_REQUEST['base64data']; $name = $_POST['nom']; $classe = $_POST['classe']; echo $data; $date=date('d_m_Y_H_i_s'); $image = explode('base64,',$data); file_put_contents("".$date."_".$name."_".$classe.".png", base64_decode($image[1])); ?>
Par contre impossible de restituer le png correctement ! Il me génère une image mais soit vide soit noir.

Le nommage est OK avec les valeurs du formulaire.

AJAX:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 data = $("#envoiemail").serialize() + '&base64data=' + $('#canvasimage').attr('src'); var url = 'paint/export_paint.php'; $.ajax({ type: "POST", url: url, dataType: 'text', data:data, success: function() { // indiquer à l'utilisateur que le traitement a réussi } });
Si tu vois le problème

07/03/2013, 22h41
coincoin22

La variable $_REQUEST['base64data'] arrive sur le PHP comme ça:

Code:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAK8CAYAAAD/M0aOAAAgAElEQVR4Xu3dv6vddboF4G MMYUalASRBMVCCwUxJo2dYicIBsUmCbZCirQ2Cv6o7CSQwlrTiShoYaH/QVKIgggiotFCUDCCGDXO3bncywzjjDnJ2SfvynoCU83J3ut91qda99zMtj//58/iDwECBA
08/03/2013, 20h08
Watilin

Honnêtement là, je sèche… Il faudrait savoir si le problème vient du serveur ou du client. Essaye d'envoyer une image que tu as déjà dans ta base de données, et compare les chaînes en base 64.
Sinon, il faut peut-être que tu échappes toi-même les + et les / de ta chaîne, mais il me semble que jQuery le fait. C'est une hypothèse à vérifier.