Convert HTML5 Canvas to Image using JavaScript and save image to Database using C# and VB.Net in ASP.Net

Hi resi,

I have created sample code which full-fill your requirement.You need to modify as per your requirement.

 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="File" 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="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();
                $('[Id*=ImageVal]').val(base64);
            });
        });
    </script>
</div>
</form>

C#

protected void OnUpload(Object sender, EventArgs e)
{
    byte[] bytes = Convert.FromBase64String(ImageVal.Value.Split(',')[1]);
    using (FileStream stream = new FileStream(Server.MapPath("~/Images/" + txtImageName.Text.Trim() + ".png"), FileMode.Create))
    {
        stream.Write(bytes, 0, bytes.Length);
        stream.Flush();
    }

    using (SqlConnection con = new SqlConnection(contring))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO [File] VALUES(@ImageName)", con))
        {
            cmd.Parameters.AddWithValue("@ImageName", "Images/" + txtImageName.Text.Trim() + ".png");
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
            }
        }
    }
    txtImageName.Text = "";
    this.GetData();
}

private void GetData()
{
    using (SqlConnection con = new SqlConnection(contring))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT [File] 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 OnUpload(sender As [Object], e As EventArgs)
	Dim bytes As Byte() = Convert.FromBase64String(ImageVal.Value.Split(","C)(1))
	Using stream As New FileStream(Server.MapPath("~/Images/" + txtImageName.Text.Trim() + ".png"), FileMode.Create)
		stream.Write(bytes, 0, bytes.Length)
		stream.Flush()
	End Using

	Using con As New SqlConnection(contring)
		Using cmd As New SqlCommand("INSERT INTO [File] VALUES(@ImageName)", con)
			cmd.Parameters.AddWithValue("@ImageName", "Images/" + txtImageName.Text.Trim() + ".png")
			Using sda As New SqlDataAdapter(cmd)
				Dim dt As New DataTable()
				sda.Fill(dt)
			End Using
		End Using
	End Using
	txtImageName.Text = ""
	Me.GetData()
End Sub

Private Sub GetData()
	Using con As New SqlConnection(contring)
		Using cmd As New SqlCommand("SELECT [File] FROM [File]", con)
			Using sda As New SqlDataAdapter(cmd)
				Dim dt As New DataTable()
				sda.Fill(dt)
				GvImage.DataSource = dt
				GvImage.DataBind()
			End Using
		End Using
	End Using
End Sub

Screenshot