How to Capture
Signatures Online on Web Page, IPads, Mobile Phones or Tables using HTML5
Canvas and jQuery Sketch Plugin.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="CaptureSignature.aspx.cs"
Inherits="CaptureSignature"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HTML5 Canvas to Capture Signatures Using JQuery</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style",
"color:#000");
});
$("#btnSave").bind("click",
function () {
var base64 =
$('#colors_sketch')[0].toDataURL();
$("#imgCapture").attr("src", base64);
$("#imgCapture").show();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="tools">
<a href="#colors_sketch"
data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="600" height="300">
</canvas>
<br />
<br />
<input type="button" id="btnSave" value="Save as Image" />
<hr />
<img id = "imgCapture"
alt = "" style = "display:none;border:1px solid #ccc"
/>
</form>
</body>
</html>
No comments:
Post a Comment