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