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...

[ProgElecT]

Salut

Peut être de ce coté
Ajax
apprendre l'AJAX

[BartRoX]

Merci pour le déplacement et pour les liens, mais une liste de tutoriel sur AJAX ne m'aide pas vraiment... Je n'ai jamais utilisé AJAX et n'ai malheureusement pas le temps d'apprendre tout de A à Z maintenant...
J'ai néanmoins trouvé des infos ici:https://siddh.developpez.com/articles/ajax/ concernant ma curiosité à propos des valeurs readyState = 4 et status = 200, mais je ne suis pas plus avancé sur le paramètre "url" que sur l'autre tutoriel que j'avais trouvé précédemment...

je reprends pour ceux qui ne veulent pas tout relire, dans le code donne par melka one, sur la ligne

Code :

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

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

à quoi correspond "adresse_du_ficher.php" ? (Le paramètre "url" de open())

Et aussi comment je spécifie le chemin du dossier sur mon serveur ou je veux enregistrer l'image (le canva que j'ai fabriqué), qui se situe au même niveau que mon fichier php sur le serveur.

Finalement, je suis ouvert à toute proposition même qui n'ont rien à voir avec celle proposée, tant que la finalité est la

[NoSmoking]

Bonjour,

je reprends pour ceux qui ne veulent pas tout relire, dans le code donne par melka one, sur la ligne

Code :

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

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

à quoi correspond "adresse_du_ficher.php" ? (Le paramètre "url" de open())

qu'est ce que tu ne comprends pas dans open(« méthode »,« url »,flag) :

url -> l'url à laquelle on va envoyer notre requête.
Si la méthode est GET, on met les paramètres dans l'url.
flag -> true si l'on veut un dialogue asynchrone, sinon, false.

[BartRoX]

Je ne comprends pas ce que je dois mettre pour ce paramètre. Pour rappel je souhaite enregistrer mon canva sous forme d'image dans un dossier de mon serveur.
Je ne vois pas quel rapport avec un fichier, php ou autre, à écrire ici... A qui s'adresse la requête ?

[mathieu]

il n'y a que du code coté serveur qui puisse modifier les fichiers sur le serveur.
donc le code javascript récupère le contenu de l'image et envoie la requete http. et le code php récupère ce contenu et l'enregistre dans un fichier.

[BartRoX]

Pour finir je viens de résoudre mon problème, notamment grace à ce forum: https://stackoverflow.com/questions/...nvas-todataurl que j'ai adapté ensuite à mon projet.

Merci tout de même à ceux qui ont tenté de m'aider, ça m'a tout de même aider à mieux comprendre Javascript/Ajax.