Using Canvas to save Signatures as image using jQuery
Many time, we want to think that how to create a
canvas signature in our web site or blog and how we can save that canvas signature.
Many times we want to need to the dynamic signature of the client so this
article help us.
For more:-
How to open pop up image on page load using jquery and css ,Preview of image before upload using java script and JQuery , How to Change the image on mouse over using Jquery
Source code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="capturesignatureswithjQuery.aspx.cs"
Inherits="capturesignatureswithjQuery" %>
<!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></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();
$("#saveimg").attr("src", base64);
$("#saveimg").show();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width: 500px;">
<legend>Canvas to
save Signatures as image using jQuery</legend>
<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="500" height="200">
</canvas>
<br />
<br />
<input type="button" id="btnsave" value="Save as Image" />
<img id="saveimg" alt="" style="display: none; border: 1px solid #ccc" />
</fieldset>
</form>
</body>
</html>
Out–Put:-
Using Canvas to save Signatures as image using jQuery
Reviewed by NEERAJ SRIVASTAVA
on
9:41:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
9:41:00 PM
Rating:
ReplyDeleteExcellent Post, I welcome your interest about to post blogs. It will help many of them to update their skills in their interesting field.
Regards,
Angularjs training in chennai|Angularjs training chennai
I think this is the interesting topic on technology workshop, because technology is the source people requirement, when people need some idea to work fast when new technology develop.
ReplyDeleteBest Angularjs Training in Chennai
angularjs training center in chennai