Capture Signature using HTML5 Canvas in ASP.Net Master Page using jQuery

Last Reply 2 months ago By pandeyism

Posted 2 months ago

Hello,

I try to re-draw a digital signature, it's not working now.

Please help, thank you.

Here are my codes: (i use master page and page content)

HTML:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/mobomo/sketch.js/master/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");
            });
            $("[Id*=btnSave]").on("click", function () {
                var base64 = $('[id*=colors_sketch]')[0].toDataURL();
                $('[Id*=ImageVal]').val(base64);
            });
        }); 
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <br />
    <br />
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%;">
                50%</div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 90%;">
                90%</div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 30%;">
                30%</div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 10%;">
                10%</div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 70%;">
                70%</div>
        </div>
        <br>
    </div>
    <h4>
        <b>Please Read Carefully, and Sign Below</b></h4>
    <hr />
    <p class="MsoNormal">
        <span>I hereby certify that I have not knowingly withheld any information that might
            adversely affect my chances for employment and that the answers given by me are
            true and correct to the best of my knowledge. I further certify that I, the undersigned
            applicant, have personally completed this application. I understand that any omission
            or misstatement of material fact on this application or on any document used to
            secure employment shall be grounds for rejection of this application or for immediate
            discharge if I am employed, regardless of the time elapsed before discovery.
            <o:p>
            </o:p>
        </span>
    </p>
    <br />
    <p class="MsoNormal">
        <span>I herby authorize CitiStaff Solutions Inc. to thoroughly investigate my references,
            work record, education and other matters related to my suitability for employment
            (excluding criminal background information) unless otherwise specified above. I
            further, authorize the references I have listed to disclose to the company any and
            all letters, reports and other information related to my work records, without giving
            me prior notice of such disclosure. In, addition, I hereby release the company,
            my former employers and all other persons, corporations, partnerships and associations
            from any and all claims, demands or liabilities arising out of or in any way related
            to such investigation or disclosure.
            <o:p>
            </o:p>
        </span>
    </p>
    <br />
    I understand that nothing contained in the application, or conveyed during my interview
    which may be granted or during my employment, if hired, is intended to create an
    employment contract between me and the company. In addition, I understand and agree
    that if I am employed, my employment is for no definite or determinable period and
    may be terminated at any time, with or without prior notice, at the option of either
    myself or the company, and that no promises or representations contrary to the foregoing
    are binding on the company unless made in writing and signed by me and the company’s
    designated representative.<br />
    <br />
    <br />
    <script type="text/javascript">
        function ValidateCheckBox(sender, args) {
            if (document.getElementById("<%=yes_wk.ClientID %>").checked == true) {
                args.IsValid = true;
            } else {
                args.IsValid = false;
            }
        }
    </script>
    <asp:CheckBox ID="yes_wk" runat="server" OnCheckedChanged="yes_wk_CheckedChanged" />
    I agree.
    <br />
    <br />
    <br />
    <hr />
    <br />
    <div class="tools">
        <a href="#colors_sketch" data-tool="marker">Marker</a> (drag and draw a signature)<br />
        <br />
        &nbsp;<a href="#colors_sketch" data-tool="eraser">Clear</a> (click on [Clear], then
        click on your digital signuture to remove it.&nbsp; Click on [Marker] to re-draw
        your signature again in the blank area)<br />
        <br />
        Please use a mouse to drag and draw a signature in the blank area below:</div>
    <br />
    <br />
    <br />
    <br />
    <canvas id="colors_sketch" width="300px" height="100pxs"> 
    </canvas>
    <br />
    <br />
    <asp:TextBox ID="txtImageName" Width="150px" Height="30px" placeholder="Enter Your Full Name"
        runat="server" />
    <asp:Button ID="btnSave" Text="Save Your Signature" class="btnSuccess" OnClick="OnUpload"
        runat="server" />
    <hr />
    <asp:HiddenField ID="ImageVal" runat="server" />
    <br />
    <asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:ImageField DataImageUrlField="Path" HeaderText="Your Signature Image" ControlStyle-Height="85"
                ControlStyle-Width="200" />
        </Columns>
    </asp:GridView>
    <asp:Image ID="myImagei" runat="server" />
</asp:Content>

 

Posted 2 months ago
KatieNgoc says:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/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");
});
$("[Id*=btnSave]").on("click", function () {
var base64 = $('[id*=colors_sketch]')[0].toDataURL();
$('[Id*=ImageVal]').val(base64);
});
});
</script>

 Replace above code to take reference below code.

<script type="text/javascript">
    $(function () {
        $('[id*=colors_sketch]').sketch(); $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
        $("[id*=btnSave]").on("click", function () {
            var base64 = $('[id*=colors_sketch]')[0].toDataURL();
            $('[id*=ImageVal]').val(base64);
        });
    });
</script>