| 12
 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> | 
Partager