IPad/IPhone/Android Document Signature Pad

IPad/IPhone/Android Document Signature Pad

I have designed this for making the signature on documents. I have simply used Canvas, JSON, Javascript and ASP.Net 3.5 with C#.

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw Onto The Canvas With JavaScript

<script type="text/javascript">

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    ctx.fillStyle = "#FF0000";

    ctx.fillRect(0, 0, 150, 75);

</script>

 

For more help on canvas, Visit....
http://www.w3schools.com/html5/html5_canvas.asp

JSON

JSON (JavaScript Object Notation) is an independent data exchange format. JSON is limited to text and numeric values. Binary values are not supported.

JSON is a subset of the JavaScript Specification (ECME-Script) and it is therefore directly supported in JavaScript.

Data structures in JSON are based on key / value pairs. The key is a string, the value can be a numerical value, a boolean value (true or false) or an object.

An JSON object is a set of key / value pairs which starts with "{" and ends with "}".

 

<script type="text/javascript">

    function btnUpdate_onclick()

     {

        var SigName = document.getElementById('<%=txtSigName.ClientID%>').value;

        var image = document.getElementById("canvasSignature").toDataURL("image/png");

        image = image.replace('data:image/png;base64,', '');

        //alert(SigName);

        $.ajax(

        {

            type: 'POST',

            url: "SaveCanvas.aspx/UpdateImage",

            data: '{ "imageData" : "' + image + '" }',

            //data: '{"SignName":"' + SigName + '"}',

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            success: function (msg)

            {

                clearCanvas();

                bodyOnLoad();

                greet();

            }

        });

    }

</script>