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

ASP.NET Ajax Discussion :

Enregistrer canvas au format JPG sur un serveur [Débutant]


Sujet :

ASP.NET Ajax

  1. #1
    Candidat au Club
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2016
    Messages : 2
    Points : 3
    Points
    3
    Par défaut Enregistrer canvas au format JPG sur un serveur
    Bonjour

    Habitué a developper en asp classique, je met le nez dans le .net et j'ai suivi quelques tuto sur l'utilisation des canvas...

    Mon but est d'enregister le dessin de l'utilisateur au format JPG sur un serveur... et que l'image ai comme nom une variable contenu dans un input.

    A l'aide des différents tuto/forum, j'ai reussi a recuperer le dessin, a le sauvegarder avec un nom fix, mais au format PNG. J'arrive aussi a afficher dans la page HTML le contenu du canvas au format JPG...
    Des que j'essai de passer le dataurl en JPG pour l'upload, ou que j'essaie de passer le nom en argument, plus rien ne marche...et je commence a tourner en rond... du coup j'appelle a l'aide XD

    La page Web contient donc un canvas (mycanvas), un bouton pour valider l'upload, et un input qui contiendra le nom de l'image.

    la fonction upload en javascript:

    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 Upload() {
     
     
     
        // Generate the image data
       var Pic = document.getElementById("myCanvas").toDataURL("image/png");
          //var Pic=document.getElementById("myCanvas").toDataURL("image/jpeg");  
        Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
     
        // Sending the image data to Server
         $.ajax({
            type: 'POST',
            url: 'Save_Picture.aspx/UploadPic',
            data: '{ "imageData" : "' + Pic + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert("dessin enregistre");
            },
            error: function (msg) {
                alert("dessin non enregistre");
            }
     
        });
     
    }
    et la page aspx qui enregistre l'image

    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
    using System;
    using System.Web;
    using System.IO;
    using System.Web.Script.Services;
    using System.Web.Services;
     
    [ScriptService]
    public partial class Save_Picture : System.Web.UI.Page
    {
        [WebMethod()]
        public static void UploadPic (string imageData)
        {string abc="image/mon_dessin.png";
            string Pic_Path = HttpContext.Current.Server.MapPath(abc);
            using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);
                    bw.Write(data);
                    bw.Close();
                }
            }
        }
    }
    Du coup, comment passer le dataurl en JPG (j'ai l'impression que c'est le replace apres qui n'est pas bon... mais malgré mes recherches je n'ai pas trouvé), et comment passer la valeur de l'imput en 2eme argument pour la fonction Uploadpic (là je sèche totallement....)

    Merci

    Jabb'

  2. #2
    Modérateur
    Avatar de DotNetMatt
    Homme Profil pro
    CTO
    Inscrit en
    Février 2010
    Messages
    3 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : CTO
    Secteur : Finance

    Informations forums :
    Inscription : Février 2010
    Messages : 3 611
    Points : 9 742
    Points
    9 742
    Billets dans le blog
    3
    Par défaut
    As-tu des messages d'erreur particuliers ? Si oui, par quelle ligne sont-ils générés ?

    Pour l'instant je peux déjà te donner un conseil à la vue de ton code : c'est dommage d'utiliser une page ASPX pour gérer l'upload, car à chaque appel tu charges la page, ce qui entrîne l'exécution de tout le cycle de vie de la page et ce n'est pas optimal. Tu peux utiliser un Handler (extension .ASHX) qui va te permettre de faire la même chose, mais sans toute la lourdeur du chargement de page.

    Après c'est surtout à prendre en compte si tu as un traffic important sur ton site. Si c'est juste une petite app pour quelques utilisateurs alors pas la peine de t'embêter à switcher vers un handler

    Pour passer un second paramètre à ta méthode, tu dois pouvoir faire ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    data: '{ "imageData" : "' + Pic + '", "secondParam" : "valeurDuSecondParam" }',
    Et bien sûr modifier la signature de ta méthode pour qu'elle accepte ce second paramètre.

  3. #3
    Candidat au Club
    Homme Profil pro
    autre
    Inscrit en
    Janvier 2016
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : autre

    Informations forums :
    Inscription : Janvier 2016
    Messages : 2
    Points : 3
    Points
    3
    Par défaut
    bon, j'ai pondu un pavé qui a disparu...

    pour faire bref, MERCI

    Grace a toi j'ai reussi a passe mon 2eme argument...

    et comme le replace me titillais, j'ai reussi a le corriger... bref, ca marche



    Pour l'aspx, pas beaucoup de trafic prevu, mais je vais regarder du coté de l'ashx pour ma culture perso...

    encore MERCI

    du coup, le code corrigé

    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
    27
    28
    29
    function Upload(ch) {
     
     
     
        // Generate the image data
      // var Pic = document.getElementById("myCanvas").toDataURL("image/png");
     
          var Pic=document.getElementById("myCanvas").toDataURL("image/jpeg");  
      //  Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
      Pic = Pic.replace("data:image/jpeg;base64,", "");
     
     
     
        // Sending the image data to Server
         $.ajax({
            type: 'POST',
            url: 'Save_Picture.aspx/UploadPic',
       //     data: '{ "imageData" : "' + Pic + '" }',
            data: '{ "imageData" : "' + Pic + '", "chemin" : "'+ch+'" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert("Dessin enregistre");
            },
            error: function (msg) {
                alert("Dessin non enregistre");
            }
     
        });
    et l'aspx

    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
     
    using System;
    using System.Web;
    using System.IO;
    using System.Web.Script.Services;
    using System.Web.Services;
     
    [ScriptService]
    public partial class Save_Picture : System.Web.UI.Page
    {
        [WebMethod()]
        public static void UploadPic (string imageData, string chemin)
        {    
            string Pic_Path = HttpContext.Current.Server.MapPath(chemin);
            using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);
                    bw.Write(data);
                    bw.Close();
                }
            }
        }
    }

    Jabb'

  4. #4
    Modérateur
    Avatar de DotNetMatt
    Homme Profil pro
    CTO
    Inscrit en
    Février 2010
    Messages
    3 611
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : CTO
    Secteur : Finance

    Informations forums :
    Inscription : Février 2010
    Messages : 3 611
    Points : 9 742
    Points
    9 742
    Billets dans le blog
    3
    Par défaut
    Cool N'oublie pas de marquer la discussion comme résolue à l'aide du bouton "Résolu" qui se trouve en bas de cette page.

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

Discussions similaires

  1. Ouvrir, éditer, enregistrer documents docx/odt directement sur le serveur
    Par SeigneurMartin dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 17/05/2013, 08h09
  2. Réponses: 0
    Dernier message: 12/05/2009, 08h31
  3. envoi d'une table en format csv sur un serveur
    Par laurent.w dans le forum Access
    Réponses: 5
    Dernier message: 09/01/2007, 17h03
  4. Enregistrement d'une image sur le serveur
    Par MHI dans le forum Langage
    Réponses: 3
    Dernier message: 07/04/2005, 15h25
  5. [Cookie]Enregistrer un Cookie sur le serveur
    Par schneiderj dans le forum Développement Web en Java
    Réponses: 5
    Dernier message: 06/04/2005, 14h39

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