Ecrire le contenu d'un canvas HTML5 vers image

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:

---

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:

---

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:

---

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:

---

1 2 3 4

‰PNG    IHDR

---

je ne sais plus trop ou regarder..

code PHP ecrivant l image

Code:

---

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 ?

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

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 ?

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"

Citation:

---

Envoyé par Bovino

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

---

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

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:

---

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

---

Code:

---

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

---