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


Sujet :

ASP.NET Ajax

  1. #1
    Candidat au Club
    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

    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.
    Less Is More
    Pensez à utiliser les boutons , et les balises code
    Desole pour l'absence d'accents, clavier US oblige
    Celui qui pense qu'un professionnel coute cher n'a aucune idee de ce que peut lui couter un incompetent.

  3. #3
    Candidat au Club
    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

    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.
    Less Is More
    Pensez à utiliser les boutons , et les balises code
    Desole pour l'absence d'accents, clavier US oblige
    Celui qui pense qu'un professionnel coute cher n'a aucune idee de ce que peut lui couter un incompetent.