Save captured HTML5 Canvas signature in database using C# in ASP.Net

Hi Harties,

Check this example. Now please take its reference and correct your code.

Instead of using html HiddenField control use ASP HiddenField control.

HTML

<div>
    <asp:HiddenField ID="ImageVal" runat="server" Value="" />
    <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" runat="server" onserverclick="OnUpload" />--%>
    <asp:Button ID="btnSave" Text="Save as Image" OnClick="OnUpload" runat="server" />
    <hr />
    <img id="imgCapture" alt="" style="display: none; border: 1px solid #ccc" />
</div>
<script type="text/javascript" src="https://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");
        });
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            //$("#imgCapture").attr("src", base64);
            $('[Id*=ImageVal]').val(base64);
        });
    });
</script>

C#

protected void OnUpload(object sender, EventArgs e)
{
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + ImageVal.Value + "')", true);
}

Screenshot