Discussion :

[venomelektro]

Salut,

Je bloque sur une feature que je suis en train de faire de récupération d'un canvas dessinable (fait avec raphael JS) ,

j'envoi les datas de la façon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 var dataURL = document.getElementById('renderCanvas').toDataURL("image/png");
           dataURL = dataURL.replace('data:image/png;base64,','');
             $.ajax(
                {
                    url  : 'ajax/export-image.php',
                    data :  {image:dataURL},
                    type : 'post',
                    dataType :'json',
                    success: function (j)
                    {
                    }
                }

avec mes outils de debug, je vois bien les datas passé lors de la requete XHR

Code :

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

image=iVBORw0KGgoAAAA...

le soucis c est que coté PHP , je recois $_POST['image'] vide.. pourtant mon php.ini limite les données post à 700M

Code :

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

post_max_size = 700M

autant vous dire que je suis bien en dessous avec mon image de 400*600..

sur ce serveur, aucun soucis pour d autres types de variables post, mais la ca coince, si je modifie les données postés pour rajouter, par exemple test=1, je le récupère bien coté PHP, mais PAS mon image.

du coup , je me suis tourné vers file_get_contents('php://input');, la je récupere bien mon buffer d image, mais en l ecrivant dans un fichier, apres plusieurs test, d abord un base64_decode puis fwrite ou imagefromstring ou file_puts_contents , j'ai toujours un PNG invalide d écrit (impossible de le lire dans photoshop ou l apercu de l OS)

pourtant à regarder le fichier dans un editeur, l entete a l air (a peu près) correcte :

Code :

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

1
2
3
4
‰PNG

 
IHDR

je ne sais plus trop ou regarder..

code PHP ecrivant l image

Code php :

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

1
2
3
4
5
6
7
$data = $_POST['image'];
$img = $data;
$data = base64_decode($img);
$rand_name = $userId.'_'.rand(10000,999999).'.png';
$fp = fopen('medias/player_painting/'.$rand_name,'wb');
fwrite($fp,$data);
fclose($fp);

une suggestion ?

[NoSmoking]

Bonjour,
as tu essayé de supprimer dataType :'json',?

[Bovino]

NoSmoking : aucun intérêt, cette valeur détermine comment traiter le résultat reçu, or là, le serveur ne renvoie rien.

venomelektro : as-tu regardé ce que dit la console JavaScript ?

[venomelektro]

Après quelques recherche, il semble qu'apres l appel de toDarlURL il est nécéssaire d attendre un peu que l OS ai le temps de faire l opération.

la solution que j'ai trouvé est donc de faire l appel ajax avec un setTimeOut

effectivement ca marche, seulement quel délai mettre ? mystère car cela doit dépendre de la puissance de la machine

en fait le risque si c est pas fini est que tu envoi seulement soit rien , soit une partie de l image , ce qui la rend illisible.

Je cherche mais ne trouve pas de solution viable pour le moment. quel dommage que l API HTML5 n ai pas prévu de callback type "onComplete"

[NoSmoking]

NoSmoking : aucun intérêt, cette valeur détermine comment traiter le résultat reçu, or là, le serveur ne renvoie rien.

j'ai carrément tout interprété à l'envers

[danielhagnoul]

Dans un cas précédent, j'avais utilisé l'attribut HTML5 "dowload" pour télécharger l'image générée par la méthode "toDataURL".

Mais à cause d'une sécurité ou du problème de temporisation, c'est l'utilisateur qui devait cliquer sur le lien, je n'avais pas réussi à déclencher automatiquement le téléchargement par un $( selector ).trigger( "click" ).

Code HTML :

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

<a id="aSavePNG" href="" download="soins.png">Sauvegarde -moi !</a>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
$( "#aSavePNG" ).on( "click", function(){
    setTimeout( function(){
        $( "#aSavePNG" ).css( "display", "none" );
    }, 1000 );
});
 
$( "#btnConvert" ).on( "click", function(){
    $( "#aSavePNG" )
        .attr( "href", $( "canvas" ).eq( 1 ).get( 0 ).toDataURL( "image/png" ) )
        .css( "display", "block" );
});