In this article I will explain with an example, how to upload (save) HTML5 Canvas Image to Server in Folder (Directory) in ASP.Net MVC.
In this article, 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 (Directory).
 
 
Namespaces
You will need to import the following namespace.
using System.IO;
 
 
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
This Action method gets called, when Save Button is clicked and it accepts BASE64 string as a parameter.
Inside this Action method, the BASE64 string is converted into a Byte Array.
Then, a check is performed whether Folder (Directory) exists, if not then the Folder (Directory) is created.
Finally, the Byte Array is saved as Image file in Folder (Directory) using WriteAllBytes method of File class.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string imageData)
    {
        string base64 = imageData.Split(',')[1];
 
        //Convert Base64 string to Byte Array.
        byte[] bytes = Convert.FromBase64String(base64);
 
        string folderPath = Server.MapPath("~/Files");
        if (!Directory.Exists(folderPath))
        {
            Directory.CreateDirectory(folderPath);
        }
        //Save the Byte Array as Image File.
        System.IO.File.WriteAllBytes(string.Format("{0}\\{1}.png", folderPath, Path.GetRandomFileName()), bytes);
 
        return View();
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the HTML Form there is 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 Input 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 JavaScript OnClick event handler, which calls the ConvertToImage JavaScript function.
Inside the ConvertToImage JavaScript function, the HTML5 Canvas Image is converted into BASE64 string and then saved into the Hidden Field.
 
jQuery Sketch plugin implementation
Inside the View, the following JS scripts are inherited.
1. jquery.min.js
2. sketch.min.js
Inside the jQuery document ready event handler, the jQuery Sketch plugin is applied to the HTML5 Canvas element.
 
Submitting the Form
When the Submit button is clicked, the Form is submitted to the Controllers Action Method.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <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" style="border: 1pxsolid;"></canvas>
        <br />
        <input type="hidden" ID="hfImageData" name="imageData"/>
        <input type="submit" value="Save" onclick="ConvertToImage()" />
    }
    <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");
            });
        });
        function ConvertToImage() {
            $("[id*=hfImageData]").val($('#colors_sketch')[0].toDataURL());
        };
    </script>
</body>
</html>
 
 
Screenshots
Creating Signature and saving
ASP.Net MVC: Upload (Save) HTML5 Canvas Image to Server in Folder (Directory)
 
Uploaded HTML5 Canvas Image
ASP.Net MVC: Upload (Save) HTML5 Canvas Image to Server in Folder (Directory)
 
 
Downloads
Download Code