Enregistrer canvas au format JPG sur un serveur

Version imprimable

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:

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:

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'

28/01/2016, 14h10
DotNetMatt

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:

data: '{ "imageData" : "' + Pic + '", "secondParam" : "valeurDuSecondParam" }',

Et bien sûr modifier la signature de ta méthode pour qu'elle accepte ce second paramètre.

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:

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:

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'

28/01/2016, 15h00
DotNetMatt

Cool :ccool: N'oublie pas de marquer la discussion comme résolue à l'aide du bouton "Résolu" qui se trouve en bas de cette page.