Sauvegarder canvas sur server

Version imprimable

13/10/2022, 07h33
BartRoX

Sauvegarder canvas sur server

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:

$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...
13/10/2022, 08h06
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
13/10/2022, 08h51
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...

jour

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

Code:

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:

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

17/10/2022, 03h05
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:

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:

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:

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

?
19/10/2022, 03h09
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...
19/10/2022, 08h34
ProgElecT

Salut

Peut être de ce coté
:fleche:Ajax
:fleche:apprendre l'AJAX
19/10/2022, 09h51
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:

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 ;)
19/10/2022, 14h03
NoSmoking

Bonjour,

Citation:

Envoyé par BartRoX

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

Code:

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

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

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

Citation:

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.
20/10/2022, 07h04
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 ?
20/10/2022, 08h46
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.
20/10/2022, 10h21
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.