Sauvegarde d'image canvas avec Ajax et PHP

**coincoin22** · 08/03/2013, 10h50

Salut !

J'ai un souci. J'ai un script utilisant ajax qui permet de sauvegarder sur un serveur le contenu d'un canvas.

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
function exportAndSaveCanvas()  {
	var screenshot = Canvas2Image.saveAsPNG(canvas, true);
	canvas.parentNode.appendChild(screenshot);
	screenshot.id = "canvasimage";		
	data = $('#canvasimage').attr('src');
	canvas.parentNode.removeChild(screenshot);
	var url = 'paint/export_paint.php';
	$.ajax({ 
		type: "POST", 
		url: url,
		dataType: 'text',
		data: {
		    base64data : data
		}
	});
}

Ce script renvoie à une page PHP qui stocke l'image:

Code php :

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

1
2
3
4
5
$data = $_POST['base64data'];
$date=date('d_m_Y_H_i_s');
$image = "paint_".$date.".png";
$image = explode('base64,',$data); 
file_put_contents("paint_".$date.".png", base64_decode($image[1]));

Tout fonctionne très bien !

MAIS sur ma page principal (canvas), j'ai aussi mis un formulaire permettant de récupérer le nom, la classe... Pour ensuite stocker en BDD le nom, la classe et le nom de l'image.

J'avais pensé (on m'a aidé !) faire ma requête ajax puis soumettre le formulaire MAIS étant donné que je stocke la date à la seconde près, il se peut que le nom de l'image soit décalé d'une seconde par rapport à la BDD.

J'ai essayé de transmettre les données du formulaire envoimail par ajax aussi:

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
	}
});

et de les récupérer pour les traiter en PHP:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$data = $_POST['base64data'];
echo $data;
$date=date('d_m_Y_H_i_s');
$classe = $_POST['classe'];
$nom = $_POST['nom'];
$image = "paint_".$date.".png";
$message = $_POST['message'];
$image = explode('base64,',$data); 
file_put_contents("paint_".$date.".png", base64_decode($image[1]));
$image_nom = "paint_".$date.".png";			
if ($_POST['nom']!="")
{
	mysql_query("INSERT INTO album (nom,classe,image,message,date) VALUES ('$nom','$classe','$image_nom','$message', now())");}
[...]

Et c'est là que ça coince !

- Niveau BDD >> OK
- Niveau image >> l'image est dégradée, vide ou noir !!!

Je n'arrive pas à voir d'où vient le problème !

On dirait que le stockage de l'image est interrompu ??
Si je commente les reqûetes SQL même problème !

Merci de votre aide précieuse !!!!!

A+
Coincoin22

**danielhagnoul** · 08/03/2013, 12h03

Bonjour

Donc il ne faut pas changer la méthode qui marche pour le fichier base64.

Je vous suggère d'essayer avec serializeArray

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: {
        base64data : data,
        formArray : $("#envoiemail").serializeArray()
    }
});

Côté PHP, vous aurez un tableau à manipuler.

On peut aussi transformer le tableau en JSON

EDIT 2013-03-08 22:21

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: {
        base64data : data,
        jsonData : JSON.stringify( $("#envoiemail").serializeArray() )
    }
});

**coincoin22** · 08/03/2013, 14h02

Merci !!!

Mais comment récupères t-on les données côté PHP ?

J'ai bien essayé un truc comme ça:

Code :

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

1
2
3
 
$tab = $_POST['formArray'];
$classe = $tab[1];

**danielhagnoul** · 08/03/2013, 22h03

~~Pour le PHP je ne sais pas.~~

EDIT 22:18

Oops ! J'ai fait une erreur, j'ai confondu les méthodes parse() et stringify(). Code corrigé :

Code javascript :

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: {
        base64data : data,
        jsonData : JSON.stringify( $("#envoiemail").serializeArray() )
    }
});

En PHP :

Code php :

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

1
2
3
<?php
    $value = json_decode( $_POST[ 'jsonData' ] );
?>

**coincoin22** · 09/03/2013, 13h54

Envoyé par danielhagnoul

Code php :

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

1
2
3
<?php
    $value = json_decode( $_POST[ 'jsonData' ] );
?>

Merci !

Mais je ne comprends pas encore tout !

$value est un tableau mais comment je retrouve mon formulaire ??

Code :

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

$nom = $value[0]

J'ai aussi essayé ça:

Code :

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

 $nom = $value->nom;

ça ne fonctionne pas !

Code :

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

$value = json_decode( $_POST[ 'jsonData' ] );

cette dernière retourne

Code :

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

nom=Michel&classe=CM1&mail=qfqsdf@sdfs.com&indicateur=47&message=yes

Comment alors retourner le contenu de nom, classe...????

**coincoin22** · 09/03/2013, 15h12

J'ai bidouillé un truc qui fonctionne mais pas très académique !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$value = json_decode($_POST[ 'jsonData' ]);
 
        $value = str_replace('nom=','',$value);
        $value = str_replace('classe=','',$value);
        $value = str_replace('mail=','',$value);
        $value = str_replace('indicateur=','',$value);
        $value = str_replace('message=','',$value);
        file_put_contents("essai.txt", $value);
        $tab=explode('&',$value);
 
        $nom = $tab[0];
        $classe =  $tab[1];
        $message =  $tab[4];

reste maintenant à gérer les caractères spéciaux !!!!!!!!!!!

**coincoin22** · 09/03/2013, 18h30

Pour les caractères spéciaux, j'ai opté pour :

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: {
        base64data : data,
        formArray : $("#envoiemail").serializeArray()
    }
});

Mais côté PHP impossible de mettre en base:

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$data = $_POST['base64data'];
	$date=date('d_m_Y_H_i_s');
	$value = $_POST[ 'formArray' ];
 
        $image = "paint_".$date.".png";
	$image = explode('base64,',$data); 
	file_put_contents("paint_".$date.".png", base64_decode($image[1]));
 
        $image_nom = "paint_".$date.".png";
 
	$nom = str_replace('nom','',$value[0]);
        $classe = str_replace('classe','',$value[1]);
        $message = str_replace('message','',$value[4]);
 
	mysql_query("INSERT INTO album (nom,classe,image,message,date) VALUES ('$nom','$classe','$image_nom','$message', now())");

Il me met "Array" pour chaque champ. Pourtant quand je fais

Code php :

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

file_put_contents("log.txt", $message);

J'ai bien le message correct dans le fichier log !!!!!!!!

Merci de votre aide ! Peut-être un problème côté requête ??

**coincoin22** · 09/03/2013, 18h45

Encore une bidouille mais ça fonctionne !!

Code php :

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

1
2
3
$nom = utf8_decode(implode(str_replace('nom','',$value[0])));
        $classe = utf8_decode(implode(str_replace('classe','',$value[1])));
        $message = utf8_decode(implode(str_replace('message','',$value[4])));

ET

Code php :

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

mysql_query("INSERT INTO album (nom,classe,image,message,date) VALUES ('".mysql_real_escape_string($nom)."','".mysql_real_escape_string($classe)."','$image_nom','".mysql_real_escape_string($message)."', now())");

**danielhagnoul** · 09/03/2013, 22h56

Je ne suis nul en PHP, je n'ai jamais fait l'effort de l'apprendre, car je déteste ce langage, mais je ne dois pas être aussi nul que je l'imaginais.

Code javascript :

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: {
        base64data : data,
        jsonData : JSON.stringify( $("#envoiemail").serializeArray() )
    }
});

Code php :

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

1
2
3
<?php
    $value = json_decode( $_POST[ 'jsonData' ] );
?>

Nommage de vos éléments de formulaire, je ne connais pas, mais vous citer :

nom=Michel&classe=CM1&mail=qfqsdf@sdfs.com&indicateur=47&message=yes

.

donc pour obtenir vos valeurs :

Code php :

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

1
2
3
4
5
6
 
$value["nom"]
$value["classe"]
$value["mail"]
$value["indicateur"]
$value["message"]

Sauvegarde d'image canvas avec Ajax et PHP [AJAX]

jQuery

Discussions similaires

Partager

Partager