Wednesday, February 21, 2018

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.

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.

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();
        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);
            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=""></script>
<link href="~/iEdit.css" rel="stylesheet" />
<script src="~/iEdit.js"></script>
<style type="text/css">
    #profilepic {
        display: block;
        position: relative;
        width: 20%;
@using (Html.BeginForm("Profilepic", "login", FormMethod.Post, new { enctype = "multipart/form-data" }))
        <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>

    $(document).ready(function () {
        $("#file").change(function (e) {
            var img =[0];
            document.getElementById("profilepic").style.display = 'block';
            if (!, true, function (res) {
                $("#profilepic").attr("src", res);
               document.getElementById("imgbase64").value = res;
            })) {
                alert("Please check file type !!!");


1 comment:

  1. That is very nice and i need to zoom In and Zoom Out this image can you help me ???.