Discussion :

[BartRoX]

Bonjour

Je cherche une solution donc je ne sais pas si ça sera plutôt du php, du Javascript ou autre, mais donc je poste ici.
Voila mon problème:

J'ai une appli HTML/php dans laquelle je crée un canva (donc une image).
Je voudrai ensuite enregistrer cette image sur mon server, là où se trouve mes fichiers php, dans un dossier particulier créé pour recevoir cette image.

Reprenant un projet qui auparavant était développé sous Laravel, le canva était créé en php, et un simple

Code :

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

$moncanva->save(storage_path(moncheminjusqualextensiondufichier));

en php suffisait, mais malheureusement ça n'a pas l'air de fonctionner aussi facilement en php classique, et je me suis retrouvé a créé mon canva en Javascript.
Il me manque donc un moyen pour l'enregistrer dans mon serveur. Après quelques recherches sur internet je n'ai rien trouvé qui puisse me servir...

[mathieu]

laraval est en php et le canvas est au niveau du navigateur. donc que vous utilisiez laravel ou non, cela ne change rien au besoin de javascript pour récupérer cette information.

vous pouvez par exemple faire cette récupération avec toDataURL qui retourne l'image du canvas au format png encodée en base64 :
https://developer.mozilla.org/en-US/...ment/toDataURL

[BartRoX]

Générer un URL du canva, pourquoi pas, mais après...?

Je suis tombé là-dessus qui dit que ce n'est pas possible en javascript : https://www.developpez.net/forums/d1...rveur-web-url/

et aussi là-dessus, mais il a beaucoup de code et zéro explication, donc je suis un peu confus... https://www.learn-codes.net/javascri...vascript-html/

Aussi vu d'autres idées, comme l'utilisation des Blob, mais une fois encore manque d'explications, juste un lien vers un github ou je n'ai pas retrouvé le detail de la fonction save qui m'intéressait...

[melka one]

jour

il faut d’abord creer une image a partir du canvas avec toBlob

Code :

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

1
2
3
4
5
6
7
function prepare_envoi(){
 
 var canvas = document.getElementById('un_canvas');
 
 canvas.toBlob(function(blob){envoi(blob)}, 'image/jpeg');
 
 }

ensuite on creer un formulaire avec FormData dans lequelle on integre l'image et enfin on envoi le tout avec 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
23
24
25
26
function envoi(blob){
 
 console.log(blob.type)
 
 var formImage = new FormData();
 formImage.append('nom_image', blob, 'nom_image.jpg');
 
 var ajax = new XMLHttpRequest();
 
 ajax.open("POST","adresse_du_ficher.php",true);
 
 ajax.onreadystatechange=function(){
 
  if (ajax.readyState == 4 && ajax.status==200){
 
  console.log=(ajax.responseText);
  }
 }
 
 ajax.onerror=function(){
 
  alert("la requette a échoué")
 }
 
 ajax.send(formImage);
 console.log("ok")

[BartRoX]

melka one >> Intéressant, merci.
J'ai tout de même quelques questions:
Premièrement la fonction envoi n'a pas d'accolades de fermeture, mais je suppose qu'elle doit se trouver tout à la fin ?

Ensuite comment fonctionne

Code :

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

formImage.append('nom_image', blob, 'nom_image.jpg');

? Je veux dire, a quoi corresponde les paramètres ? Surtout le premier me laisse un peu perplexe.

Enfin,

Code :

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

ajax.open("POST","adresse_du_ficher.php",true);

à quoi correspond le nom de fichier php ?

Pour finir, c'est plus de la curiosité mais à quoi correspond

Code :

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

ajax.readyState == 4 && ajax.status==200

?

[BartRoX]

Quelqu'un pour m'aider ?

J'essaie de comprendre le fonctionnement de ajax.open ici https://www.w3schools.com/xml/ajax_x...quest_send.asp, mais ils ne précisent pas à quoi correspond le 2ème paramètre "url".
Aussi, ils n'utilisent pas de paramètre dans le send(), du coup j'ai du mal à faire le parallèle avec mon cas et le code que melka one fourni...