IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Sauvegarder canvas sur server


Sujet :

AJAX

  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut 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 : 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...

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 615
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 615
    Par défaut
    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

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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...

  4. #4
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    735
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 735
    Par défaut
    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")

  5. #5
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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
    ?

  6. #6
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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...

  7. #7
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 127
    Par défaut
    Salut

    Peut être de ce coté
    Ajax
    apprendre l'AJAX
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  8. #8
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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 : 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.

  10. #10
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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 ?

  11. #11
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 615
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 615
    Par défaut
    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.

  12. #12
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mai 2012
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2012
    Messages : 151
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 02/05/2006, 14h24
  2. [VB.NET] Transfert sur server FTP
    Par HULK dans le forum Windows Forms
    Réponses: 7
    Dernier message: 25/04/2006, 16h04
  3. canvas sur shape et GroupBox
    Par matech dans le forum Composants VCL
    Réponses: 3
    Dernier message: 18/04/2006, 08h58
  4. [Soft] Cherche un soft pour monter en charge sur Server 2003
    Par Etanne dans le forum Autres Logiciels
    Réponses: 2
    Dernier message: 29/03/2006, 09h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo