In this article I will explain with an example, how to upload (Save) HTML5 Canvas Image to Server in Folder (Disk) in ASP.Net using C# and VB.Net.
For illustration purpose, the jQuery Sketch plugin will be used to allow users draw Signatures and later the HTML5 Canvas Image of the Signature will be uploaded to Server and saved as Image in Folder (Disk) using ASP.Net.
HTML Markup
The HTML Markup consists of an HTML DIV consisting of two HTML Anchor elements for selecting Pen and Eraser for the HTML5 Canvas Sketchpad and an HTML5 Canvas element.
There’s also an ASP.Net Hidden Field and a Button. The Hidden Field will be used to save the HTML5 Canvas Image as BASE64 string.
The Button has been assigned a OnClientClick event handler which calls the ConvertToImage JavaScript function.
<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:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnSave" Text="Save" runat="server" UseSubmitBehavior="false"
OnClick="Save" OnClientClick="return ConvertToImage(this)" />
Implementing HTML5 Canvas Sketchpad (Drawing) App using jQuery
Inside the jQuery document ready event handler, the jQuery Sketch plugin is applied to the HTML5 Canvas element.
Both the HTML Anchor elements are assigned an HTML click event handler to highlight the selected element.
Inside the ConvertToImage JavaScript function, the HTML5 Canvas Image is converted into BASE64 string and then saved into the Hidden Field.
Finally the __doPostBack JavaScript function is called, which triggers the Server Side click event of the Button.
<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 () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
});
function ConvertToImage(btnSave) {
var base64 = $('#colors_sketch')[0].toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnSave.name, "");
};
</script>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Saving the HTML5 Canvas Image in Folder (Disk)
Inside the Button click event handler, the BASE64 string is fetched from the Hidden Field and converted into a Byte Array.
Finally the Byte Array is saved as Image file in Folder (Disk).
C#
protected void Save(object sender, EventArgs e)
{
//Read the Base64 string from Hidden Field.
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
//Convert Base64 string to Byte Array.
byte[] bytes = Convert.FromBase64String(base64);
//Save the Byte Array as Image File.
string filePath = string.Format("~/Files/{0}.png", Path.GetRandomFileName());
File.WriteAllBytes(Server.MapPath(filePath), bytes);
}
VB.Net
Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
'Read the Base64 string from Hidden Field.
Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(",")(1)
'Convert Base64 string to Byte Array.)
Dim bytes() As Byte = Convert.FromBase64String(base64)
'Save the Byte Array as Image File.
Dim filePath As String = String.Format("~/Files/{0}.png", Path.GetRandomFileName)
File.WriteAllBytes(Server.MapPath(filePath), bytes)
End Sub
Screenshots
Creating Signature and saving
![Upload (Save) HTML5 Canvas Image to Server in Folder (Disk) in ASP.Net]()
Uploaded HTML5 Canvas Image
![Upload (Save) HTML5 Canvas Image to Server in Folder (Disk) in ASP.Net]()
Downloads
