jQuery Crop Image in Asp.net using Jcrop jQuery and Upload to Folder

October 06, 2015 , , 2 Comments

Introduction
In this article i will show you how to crop image using JQuery, In previous article i was show you how to define the crop section of the image using JQuery. In this article i will show you how to upload cropped image into specified directory using ASP.NET c#. Copy this code and paste into your page.


Source code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="cropimage.aspx.cs" Inherits="cropimage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" />
    <script src="jquery.Jcrop.js"></script>
    <script>
        $(function () {
            $("#cropimage1").Jcrop({
                onSelect: croparea

            });
        });
        function croparea(c) {
            $("#coordinate_x").val(c.x);
            $("#coordinate_y").val(c.y);
            $("#coordinate_w").val(c.w);
            $("#coordinate_h").val(c.h);
        }



    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src="image/12.PNG" id="cropimage1" runat="server" />
        <input type="hidden" id="coordinate_x" runat="server"/>
          <input type="hidden" id="coordinate_y" runat="server"/>
          <input type="hidden" id="coordinate_w" runat="server"/>
          <input type="hidden" id="coordinate_h" runat="server"/>
        <asp:Button ID="Button1" runat="server" Text="Crop" OnClick="Button1_Click" />
        <img src="" id="cropimg" runat="server" visible="false" />
    
    </div>
    </form>
</body>
</html>

Code behind code

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Image = System.Drawing.Image;

public partial class cropimage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string filename = "12.PNG";
        string filepath = Path.Combine(Server.MapPath("~/image"), filename);
        Image outputfile = Image.FromFile(filepath);
        Rectangle cropcoordinate = new Rectangle(Convert.ToInt32(coordinate_x.Value), Convert.ToInt32(coordinate_y.Value), Convert.ToInt32(coordinate_w.Value), Convert.ToInt32(coordinate_h.Value));
        string confilename, confilepath;
        Bitmap bitmap = new Bitmap(cropcoordinate.Width, cropcoordinate.Height, outputfile.PixelFormat);
        Graphics grapics = Graphics.FromImage(bitmap);
        grapics.DrawImage(outputfile, new Rectangle(0, 0, bitmap.Width, bitmap.Height), cropcoordinate, GraphicsUnit.Pixel);
        confilename = "Crop_" + filename;
        confilepath = Path.Combine(Server.MapPath("~/cropimag"), confilename);
        bitmap.Save(confilepath);
        cropimg.Visible = true;
        cropimg.Src = "~/cropimag/" + confilename;


    }
}

In this aricle i have two file for cropping the image , first to download the file from this url. Now in the code behind use Rectangle class is used to defined the section of the image. Now put the coordinate,which is retrieved from JQuery Jcrop function into the rectangle class. 

Jacob Lefore

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

2 comments:

  1. Make a tutorial on aspnet mvc as well

    ReplyDelete
  2. I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
    maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

    ReplyDelete