How to crop image using Iedit Jquery in MVC application

In this article I am going to explain how to crop image using Iedit Jquery and save to folder in MVC application.

Description:

In MVC application, want to add functionality to crop the image. When user’s uploading profile image, they can crop the uploaded image and it will be save to image folder. I am using IEdit Jquery plugin to crop the profile image. You can download the IEdit Jquery from here.

Implementation:

Add Controller:

Add an empty controller to project. Create action to upload profile pic.

Complete code of controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication2017.Models;

using System.Security.Cryptography;

using System.Configuration;

using System.Net.Mail;

using System.Net;

using System.IO;

using System.Web.Security;

using System.Drawing;

namespace mvcapplication2017.Controllers

{

  

    public class LoginController : Controller

    {

        //

        // GET: /Login/

        DemoEntities db = new DemoEntities();

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult Profilepic()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Profilepic(string imgbase64)

        {

            byte[] bytes = Convert.FromBase64String(imgbase64.Split(',')[1]);

            FileStream stream = new FileStream(Server.MapPath("~/Images/"+Guid.NewGuid()+".png"), FileMode.Create);

            stream.Write(bytes, 0, bytes.Length);

            stream.Flush();

            TempData["Success"] = "Image uploaded successfully";

            return View();

        }

    }

}

Add View

Add view for Profilepic action. Add Jquery and CSS reference to view.

Complete source of view:

@{

    ViewBag.Title = "MVC : Profile Image";

}

 <h2>MVC : Profile Image</h2>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<link href="~/iEdit.css" rel="stylesheet" />

<script src="~/iEdit.js"></script>

<style type="text/css">

    #profilepic {

        display: block;

        position: relative;

        width: 20%;

    }

</style>

@using (Html.BeginForm("Profilepic", "login", FormMethod.Post, new { enctype = "multipart/form-data" }))

{

    <table>

        <tr><td width="10%">Profile image :</td><td><input id="file" accept="image/*" type="file"><input type="hidden" name="imgbase64" id="imgbase64" /></td></tr>

        <tr><td></td><td><img id="profilepic" style="display:none"></td></tr>

        <tr><td></td><td><input type="submit" id="btnUpload" value="Save" /></td></tr>

    </table>

}

   @Html.Raw(TempData["Success"])

<script>

    $(document).ready(function () {

        $("#file").change(function (e) {

            var img = e.target.files[0];

            document.getElementById("profilepic").style.display = 'block';

            if (!iEdit.open(img, true, function (res) {

                $("#profilepic").attr("src", res);

               document.getElementById("imgbase64").value = res;

            })) {

                alert("Please check file type !!!");

            }

        });

    });

</script>