Bonjour a tous
Voila je viens vers vous car j'ai un petit soucis.

J'ai créer un canvas et j'aimerais sauvegarder l'image sur un serveur. Sauf que lorsquie je compile mon code il me genère une erreur 404 qui me dis :
"typeName": "System.Web.HttpException",
"message": "Le contrôleur pour le chemin «*/Save_Picture.aspx/UploadPic*» est introuvable ou n'implémente pas IController."

voici mes 3 fichiers de code

Pouvez vous m'aider svp

Fichier avec le canvas en. 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sign.aspx.cs" Inherits="Ogelec.sign" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Signature Client</title>
    <style>
        body
        {
            background-color:rgba(0,255,255,0.2);   
            text-align:center;
        }
        html
        {
            background-color:rgba(0,255,255,0.2);   
        }
        canvas
        {
            border-style:double;
        }
 
    </style>
   <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
   <!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>  
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>-->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/signature_pad.js"></script>
    <script>
        $(document).ready(function () {
            // Handler for .ready() called.
 
            var wrapper = document.getElementById("signature-pad"),
            clearButton = wrapper.querySelector("[data-action=clear]"),
            canvas = wrapper.querySelector("canvas"),
            signaturePad;
 
            // Adjust canvas coordinate space taking into account pixel ratio,
            // to make it look crisp on mobile devices.
            // This also causes canvas to be cleared.
            function resizeCanvas() {
                var ratio = window.devicePixelRatio || 1;
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }
 
            window.onresize = resizeCanvas;
            resizeCanvas();
 
            signaturePad = new SignaturePad(canvas);
 
            clearButton.addEventListener("click", function (event) {
                signaturePad.clear();
            });
 
            /*saveButton.addEventListener("click", function (event) {
                if (signaturePad.isEmpty()) {
                    alert("Merci de signer avant d'enregistrer");
                } else {
                    UploadPic();
                }
            });*/
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="JsCode.js"></script>
    <div class="page-header">
            <h1>Signature du client</h1>
        </div>
 
        <div class="panel panel-default">
            <div class="panel-body" id="signature-pad">
                <div>
                    <canvas id="myCanvas" style="width: 600px; height: 400px;"></canvas>
                </div>
                <div>
                    <div class="alert alert-info">Merci de signer au dessus</div>
                    <button data-action="clear" class="btn btn-info">Effacer</button>
                    <button onclick="javascript:DrawPic();return false;">Draw Picture</button>
                  <button onclick="javascript:UploadPic();return false;">Upload Picture to Server</button>
 
                    <a href="javascript:history.back()">Quitter</a>
                </div>
            </div>
        </div>
    </form>
 
</body>
</html>
Fichier pour sauvegarder en .cs
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
30
31
 
using System;
using System.IO;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
 
 
 
[ScriptService]
public partial class Save_Picture : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    [WebMethod()]
    public static void UploadPic(string imageData)
    {
        string Pic_Path = HttpContext.Current.Server.MapPath("MyPicture.png");
        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();
            }
        }
    }
}
et le fichier java en .js
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
 
function UploadPic() {
 
    // generate the image data
    var Pic = document.getElementById("myCanvas").toDataURL("image/png");
    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("Done, Picture Uploaded."); 
        }
    });
}
Help me please