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>