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:-

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 Using Canvas to save Signatures as image using jQuery Reviewed by NEERAJ SRIVASTAVA on 9:41:00 PM Rating: 5

7 comments:


  1. Excellent 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

    ReplyDelete
  2. Thanks for posting this useful content, Good to know about new things here, Let me share this,
    AngularJS Training in Chennai

    ReplyDelete
  3. 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.
    Best Angularjs Training in Chennai
    angularjs training center in chennai

    ReplyDelete
  4. Your Blog is really Nice and Informative..Thanks for sharing such a interesting article..keep updating..I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work.

    Java Project Center in Chennai | Java Project Center in Velachery

    ReplyDelete

Powered by Blogger.