Insert (Save) signature as Image from canvas into database using C# and VB.Net

Hii RichardSa,

Please refer below sample.

HTML

<form id="form1" runat="server">
    <div>
        <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="300px" height="100pxs"></canvas>
        <br /><br />
        <asp:TextBox ID="txtImageName" Width="150px" Height="30px" Placeholder="Enter Your Image Name" runat="server" />
        <asp:Button ID="btnSave" Text="Save Image" class="btnSuccess" OnClick="OnUpload" runat="server" />
        <hr />
        <asp:HiddenField ID="ImageVal" runat="server" />
        <br />
        <asp:GridView ID="GvImage" runat="server">
            <Columns>
                <asp:ImageField DataImageUrlField="FileName" HeaderText="Image" ControlStyle-Height="50"
                    ControlStyle-Width="50" />
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <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");
                });
                $("#btnSave").bind("click", function () {
                    var base64 = $('#colors_sketch')[0].toDataURL();
                    $('[Id*=ImageVal]').val(base64);
                });
            });
        </script>
    </div>
</form>

Namespaces

C#

using System;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(Object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.GetData();
    }
}
protected void OnUpload(Object sender, EventArgs e)
{
    byte[] bytes = Convert.FromBase64String(ImageVal.Value.Split(',')[1]);
        string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("INSERT INTO [tblFiles] (Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)"))
            {
                cmd.Parameters.AddWithValue("@Name", "Test.png");
                cmd.Parameters.AddWithValue("@ContentType", "image/png");
                cmd.Parameters.AddWithValue("@Data", bytes);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }       
        txtImageName.Text = "";
        this.GetData();
}

private void GetData()
{
    string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT [FileName] FROM [File]", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                GvImage.DataSource = dt;
                GvImage.DataBind();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.GetData()
    End If
End Sub

Protected Sub OnUpload(ByVal sender As Object, ByVal e As EventArgs)
    Dim bytes As Byte() = Convert.FromBase64String(ImageVal.Value.Split(","c)(1))
    Dim constr As String = ConfigurationManager.ConnectionStrings("Constring").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("INSERT INTO [tblFiles] (Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)")
            cmd.Parameters.AddWithValue("@Name", "Test.png")
            cmd.Parameters.AddWithValue("@ContentType", "image/png")
            cmd.Parameters.AddWithValue("@Data", bytes)
            cmd.Connection = con
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
    txtImageName.Text = ""
    Me.GetData()
End Sub

Private Sub GetData()
    Dim constr As String = ConfigurationManager.ConnectionStrings("Constring").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT [FileName] FROM [File]", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                GvImage.DataSource = dt
                GvImage.DataBind()
            End Using
        End Using
    End Using
End Sub