Sunday, February 4, 2018

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






No comments:

Post a Comment