ASP.NET MVC : Crop image and save cropped image to folder - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

ASP.NET MVC : Crop image and save cropped image to folder

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

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>


download






What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon