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