In this article I volition explain with an case, how to ingather and upload Image with Live Thumbnail Preview using jQuery and HTML5 Canvass in ASP.Net Core MVC.

The image will exist 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.

Within the jQuery document gear up event handler, a modify event handler is assigned to a FileUpload control and a click event handler is assigned to the HTML Push.

When a file is selected in the HTML FileUpload control, it is read using HTML5 FileReader API and and so the epitome is displayed in the Image element and finally the Jcrop jQuery plugin is practical to the Image element.

The Jcrop plugin makes a telephone call to SetCoordinates role on its onChange and onSelect event handlers, which allow u.s.a. to save the coordinates and dimensions i.east. height and width of the cropped epitome 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.

Within the OnLoad event handler, the original prototype is redrawn on the canvas using the saved coordinates and dimensions i.e. height and width of the cropped image.

Finally the base64 cord of the cropped image is fetched from the Sail using the toDataURL method and is saved in the imgCropped hidden field.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{

    Layout = nil ;

}

< !DOCTYPE html >

< html >

< caput >

< meta name ="viewport" content ="width=device-width" />

< championship > Index </ championship >

</ caput >

< body >

< form method ="post" enctype ="multipart/form-data" asp-controller ="Home"  asp-action ="Relieve">

< input blazon ="file" id ="FileUpload1" />

< br />

< br />

< table border ="0" cellpadding ="0" cellspacing ="5">

< tr >

< td >

< img id ="Image1" src ="" alt ="" style =" brandish : none" />

</ td >

< td >

< canvas id ="canvas" acme ="v" width ="5"></ canvas >

</ td >

</ tr >

</ table >

< br />

< input type ="push button" id ="btnCrop" value ="Crop" style =" display : none" />

< input blazon ="submit" id ="btnUpload" value ="Upload" way =" display : none" />

< input type ="hidden" name ="imgX1" id ="imgX1" />

< input type ="subconscious" name ="imgY1" id ="imgY1" />

< input blazon ="hidden" proper name ="imgWidth" id ="imgWidth" />

< input blazon ="hidden" name ="imgHeight" id ="imgHeight" />

< input blazon ="hidden" name ="imgCropped" id ="imgCropped" />

</ grade >

< script type ="text/javascript" src ="https://ajax.googleapis.com/ajax/libs/jquery/one.8.three/jquery.min.js"></ script >

< script blazon ="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.nine/js/jquery.Jcrop.min.js"></ script >

< script type ="text/javascript">

        $( function () {

            $( '#FileUpload1' ).change( office () {

                $( '#Image1' ).hide();

var reader = new FileReader();

                reader.onload = function (e) {

                    $( '#Image1' ).show();

                    $( '#Image1' ).attr( "src" , e.target.issue);

                    $( '#Image1' ).Jcrop({

                        onChange: SetCoordinates,

                        onSelect: SetCoordinates

                    });

                }

                reader.readAsDataURL($( this )[0].files[0]);

            });

            $( '#btnCrop' ).click( office () {

var x1 = $( '#imgX1' ).val();

var y1 = $( '#imgY1' ).val();

var width = $( '#imgWidth' ).val();

var height = $( '#imgHeight' ).val();

var canvas = $( "#canvas" )[0];

var context = canvass.getContext( 'second' );

var img = new Image();

                img.onload = part () {

                    canvas.summit = height;

                    canvass.width = width;

                    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);

                    $( '#imgCropped' ).val(canvas.toDataURL());

                    $( '#btnUpload' ).bear witness();

                };

                img.src = $( '#Image1' ).attr( "src" );

            });

        });

function SetCoordinates(c) {

            $( '#imgX1' ).val(c.ten);

            $( '#imgY1' ).val(c.y);

            $( '#imgWidth' ).val(c.w);

            $( '#imgHeight' ).val(c.h);

            $( '#btnCrop' ).show();

        };

</ script >

</ torso >

</ html >

Namespaces

You volition need to import the following namespaces.

using Arrangement.IO;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Mvc;

Controller

The Controller consists of ii Action methods.

Activeness method for handling GET operation

Within this Action method, simply the View is returned.

Activity method for treatment Mail service functioning for uploading the Cropped Image

This Action method gets chosen when the Upload Button is clicked. The cropped image is read as BASE64 string from the imgCropped hidden field using its Proper noun 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 binder using FileStream class.

public class HomeController : Controller

{

private IHostingEnvironment  Environment;

public  HomeController( IHostingEnvironment  _environment)

    {

        Environs = _environment;

    }

public IActionResult Alphabetize()

    {

return View();

    }

    [ HttpPost ]

public IActionResult Salve()

    {

string base64 = Request.Course[ "imgCropped" ];

byte [] bytes = Convert .FromBase64String(base64.Dissever( ',' )[1]);

cord 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();

        }

render RedirectToAction( "Alphabetize" );

    }

}

Screenshot

ASP.Net Core: Crop and Upload Image with Thumbnail using jQuery in ASP.Net Core MVC

Browser Compatibility

The in a higher place lawmaking has been tested in the following browsers.

Internet Explorer FireFox Chrome Opera

* All browser logos displayed higher up are property of their corresponding owners.

Downloads