In this article I will explain with an example, how to crop and upload Image with Live Thumbnail Preview using jQuery and HTML5 Canvas in ASP.Net Core MVC.
The image will be cropped using the Jcrop jQuery plugin, and the Live Thumbnail Preview is displayed using HTML5 Canvas and finally the Cropped Image is uploaded and saved in a folder on server using ASP.Net Core MVC.
 
 
View
The View consists of a FileUpload element, an Image element, a Button, a Submit Button, an HTML5 Canvas elements and some hidden field elements.
Inside the jQuery document ready event handler, a change event handler is assigned to a FileUpload control and a click event handler is assigned to the HTML Button.
When a file is selected in the HTML FileUpload control, it is read using HTML5 FileReader API and then the image is displayed in the Image element and finally the Jcrop jQuery plugin is applied to the Image element.
Note: For more details on Image display using HTML5 File Reader API, please refer my article HTML5 FileReader API Tutorial with example.
 
The Jcrop plugin makes a call to SetCoordinates function on its onChange and onSelect event handlers, which allow us to save the coordinates and dimensions i.e. height and width of the cropped image to the hidden fields.
When the Crop Button is clicked, it first creates an instance of the HTML5 Canvas and then loads the Image into an Image object with an OnLoad event handler.
Inside the OnLoad event handler, the original image is redrawn on the canvas using the saved coordinates and dimensions i.e. height and width of the cropped image.
Finally the base64 string of the cropped image is fetched from the Canvas using the toDataURL method and is saved in the imgCropped hidden field.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Save">
        <input type="file" id="FileUpload1"/>
        <br/>
        <br/>
        <table border="0" cellpadding="0" cellspacing="5">
            <tr>
                <td>
                    <img id="Image1" src="" alt="" style="display: none"/>
                </td>
                <td>
                    <canvas id="canvas" height="5" width="5"></canvas>
                </td>
            </tr>
        </table>
        <br/>
        <input type="button" id="btnCrop" value="Crop" style="display: none"/>
        <input type="submit" id="btnUpload" value="Upload" style="display: none"/>
        <input type="hidden" name="imgX1" id="imgX1"/>
        <input type="hidden" name="imgY1" id="imgY1"/>
        <input type="hidden" name="imgWidth" id="imgWidth"/>
        <input type="hidden" name="imgHeight" id="imgHeight"/>
        <input type="hidden" name="imgCropped" id="imgCropped"/>
    </form>
    <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://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.9/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#FileUpload1').change(function () {
                $('#Image1').hide();
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#Image1').show();
                    $('#Image1').attr("src", e.target.result);
                    $('#Image1').Jcrop({
                        onChange: SetCoordinates,
                        onSelect: SetCoordinates
                    });
                }
                reader.readAsDataURL($(this)[0].files[0]);
            });
 
            $('#btnCrop').click(function () {
                var x1 = $('#imgX1').val();
                var y1 = $('#imgY1').val();
                var width = $('#imgWidth').val();
                var height = $('#imgHeight').val();
                var canvas = $("#canvas")[0];
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function () {
                    canvas.height = height;
                    canvas.width = width;
                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
                    $('#imgCropped').val(canvas.toDataURL());
                    $('#btnUpload').show();
                };
                img.src = $('#Image1').attr("src");
            });
        });
        function SetCoordinates(c) {
            $('#imgX1').val(c.x);
            $('#imgY1').val(c.y);
            $('#imgWidth').val(c.w);
            $('#imgHeight').val(c.h);
            $('#btnCrop').show();
        };
    </script>
</body>
</html>
 
 
Namespaces
You will need to import the following namespaces.
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation for uploading the Cropped Image
This Action method gets called when the Upload Button is clicked. The cropped image is read as BASE64 string from the imgCropped hidden field using its Name from the Request.Form collection and then it is converted to a Byte Array. Then the Byte Array is saved into the Images folder inside the wwwroot folder using FileStream class.
Note: For more details about IHostingEnvironment interface, please refer Using IHostingEnvironment in ASP.Net Core.
 
public class HomeController : Controller
{
    private IHostingEnvironment Environment;
    public HomeController(IHostingEnvironment _environment)
    {
        Environment = _environment;
    }
 
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult Save()
    {
        string base64 = Request.Form["imgCropped"];
        byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
 
        string filePath = Path.Combine(this.Environment.WebRootPath, "Images", "Cropped.png");
        using (FileStream stream = new FileStream(filePath, FileMode.Create))
        {
            stream.Write(bytes, 0, bytes.Length);
            stream.Flush();
        }
        return RedirectToAction("Index");
    }
}
 
 
Screenshot
ASP.Net Core: Crop and Upload Image with Thumbnail using jQuery in ASP.Net Core MVC
 
 
Browser Compatibility
The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code