Hi zogjohnny,
Please refer below Sample.
HTML
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server" ID="updTools">
<ContentTemplate>
<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 />
<asp:Button Text="Save as Image" runat="server" ID="btnSave" />
<hr />
<img id="imgCapture" alt="" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></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);
$("#imgCapture").show();
$.ajax({
type: 'POST',
url: 'Default.aspx/SaveImage',
data: '{ "imageData" : "' + base64 + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (response) {
alert('Image saved successfully !');
}
});
return false;
});
});
</script>
Namespaces
C#
using System.Web.Services;
using System.IO;
VB.Net
Imports System.Web.Services
Imports System.IO
Code
C#
[WebMethod]
public static void SaveImage(string imageData)
{
string filePath = HttpContext.Current.Server.MapPath("~/HTML.png");
using (FileStream fs = new FileStream(filePath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData.Split(',')[1]);
bw.Write(data);
bw.Close();
}
}
}
VB.Net
<WebMethod>
Public Shared Sub SaveImage(ByVal imageData As String)
Dim filePath As String = HttpContext.Current.Server.MapPath("~/HTML.png")
Using fs As FileStream = New FileStream(filePath, FileMode.Create)
Using bw As BinaryWriter = New BinaryWriter(fs)
Dim data As Byte() = Convert.FromBase64String(imageData.Split(","c)(1))
bw.Write(data)
bw.Close()
End Using
End Using
End Sub
Screenshot