Hi Anita,
Refer the below example.
HTML
<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 () {
$('#myCanvas').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
$("#btnNext").click(function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imge = document.getElementById("imgCustomers");
ctx.drawImage(imge, 10, 10);
var img = $(canvas).parent().find('img')[0];
var mergeCanvas = $('<canvas>')
.attr({
width: $(img).width(),
height: $(img).height()
});
var mergedContext = mergeCanvas[0].getContext('2d');
mergedContext.clearRect(0, 0, $(img).width(), $(img).height());
mergedContext.drawImage(img, 0, 0);
mergedContext.drawImage(canvas, 0, 0);
var image = canvas.toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Default.aspx/MoveImages',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
}
});
});
return false;
});
function ConvertToImage(btnSave) {
var base64 = $('#myCanvas')[0].toDataURL();
$("[id*=hfValue]").val(base64);
__doPostBack(btnSave.name, "");
};
</script>
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
Eraser</a>
</div>
<asp:Image ID="imgCustomers" runat="server" />
<br />
<canvas id="myCanvas" width="500" height="200"></canvas>
<br />
<asp:Button ID="btnIncreament" Text="Increament" runat="server" OnClick="Increament" />
<input type="button" id="btnNext" value="Next" />
<asp:Button Text="Submit" runat="server" UseSubmitBehavior="false" OnClick="Submit"
OnClientClick="return ConvertToImage(this)" />
<asp:HiddenField ID="hfValue" runat="server" />
<asp:HiddenField ID="hfImage" runat="server" />
C#
using System.IO;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Web.Services
Imports System.IO
Imports System.Data.SqlClient
Imports System.Data
Code
C#
static int i = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
i++;
GetImage(i);
}
}
protected void Increament(object sender, EventArgs e)
{
i++;
GetImage(i);
}
private void GetImage(int imageid)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT Name FROM tblFilesPath WHERE Id =@Id ", con))
{
cmd.Parameters.AddWithValue("@Id", imageid);
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
da.Fill(dt);
imgCustomers.ImageUrl = "Images/" + dt.Rows[0]["Name"].ToString();
hfImage.Value = dt.Rows[0]["Name"].ToString();
}
}
}
}
[WebMethod(EnableSession = true)]
public static void MoveImages(string imageData)
{
string fileName = "xyz" + i + ".png";
string pathstring = @"D:\";
string destFile = Path.Combine(pathstring);
string destFile1 = Path.Combine(destFile, fileName);
if (File.Exists(destFile1))
{
File.Delete(destFile1);
}
using (FileStream fs = new FileStream(destFile1, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] bytes = Convert.FromBase64String(imageData);
bw.Write(bytes, 0, bytes.Length);
bw.Close();
}
}
}
protected void Submit(object sender, EventArgs e)
{
string filePath = string.Format("D:/Users/Ajeet/{0}.png", i);
string path = Server.MapPath("~/Images/") + hfImage.Value;
byte[] bytes = File.ReadAllBytes(path);
File.WriteAllBytes(Server.MapPath(filePath), bytes);
string base64 = hfValue.Value.Split(',')[1];
MoveImages(base64);
}
VB.Net
Shared i As Integer = 0
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
i += 1
GetImage(i)
End If
End Sub
Protected Sub Increament(ByVal sender As Object, ByVal e As EventArgs)
i += 1
GetImage(i)
End Sub
Private Sub GetImage(ByVal imageid As Integer)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT Name FROM tblFilesPath WHERE Id =@Id ", con)
cmd.Parameters.AddWithValue("@Id", imageid)
Using da As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
da.Fill(dt)
imgCustomers.ImageUrl = "Images/" & dt.Rows(0)("Name").ToString()
hfImage.Value = dt.Rows(0)("Name").ToString()
End Using
End Using
End Using
End Sub
<WebMethod(EnableSession:=True)>
Public Shared Sub MoveImages(ByVal imageData As String)
Dim fileName As String = "xyz" & i & ".png"
Dim pathstring As String = "D:\"
Dim destFile As String = Path.Combine(pathstring)
Dim destFile1 As String = Path.Combine(destFile, fileName)
If File.Exists(destFile1) Then
File.Delete(destFile1)
End If
Using fs As FileStream = New FileStream(destFile1, FileMode.Create)
Using bw As BinaryWriter = New BinaryWriter(fs)
Dim bytes As Byte() = Convert.FromBase64String(imageData)
bw.Write(bytes, 0, bytes.Length)
bw.Close()
End Using
End Using
End Sub
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
Dim filePath As String = String.Format("D:/Users/Ajeet/{0}.png", i)
Dim path As String = Server.MapPath("~/Images/") + hfImage.Value
Dim bytes As Byte() = File.ReadAllBytes(path)
File.WriteAllBytes(Server.MapPath(filePath), bytes)
Dim base64 As String = hfValue.Value.Split(","c)(1)
MoveImages(base64)
End Sub
When you save the byte array in database it will saved as 0xFFD8FFE000104A46494600010101006000600000FFE10D...
