Crop Image in Asp.net using Jcrop jQuery Plugin and Upload to Folder Using Asp.Net C#




 Crop Image in Asp.net using Jcrop jQuery Plugin 

Image  Upload And Crop Or Resize Image  Using JQuery JCrop Plugins In Asp.Net C#.


Multiple Image Upload
Image Update in Gridview   
Show Image Preview
Restrict Upload File Size
Image Insert Bind  GridView
Without Database Upload Image Show

Download JQuery Plugins

https://app.box.com/s/bcwq6p6z3eooeqmj7m2q3fdl5dphuosi https://app.box.com/s/68daq0falceno4uiolnnn2d2cm52lc1q

                  Download Coding
                              Download

                                     DEMO





                   Html Coding 



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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

<script type="text/javascript" src="JQS/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="JQS/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.min.css" media="screen" />
   <script type="text/javascript">
       $(document).ready(function ()
       {
           $('#ImageCroped').Jcrop({ onSelect: updateCoordinates });

       });

       function updateCoordinates(p)
       {
           $('#XAxis').val(p.x);
           $('#YAxis').val(p.y);
           $('#Height').val(p.h);
           $('#Width').val(p.w);
       };

     
   </script>
   
</head>
   

<body>
<form id="form1" runat="server">
<div>

  

    <asp:image   id="ImageCroped" runat ="server" Visible="False"   />
     
           
   
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Upload" />
      
          
       <asp:HiddenField ID="XAxis" runat="server" />
     <asp:HiddenField ID="YAxis" runat="server" />
     <asp:HiddenField ID="Height" runat="server" />
    <asp:HiddenField ID="Width" runat="server" /> <br />
   
    
   
    <asp:Button ID="Button1" runat="server" Text="Crop Image"
        onclick="Button1_Click" Height="25px" Width="98px" />
   
     <asp:Image ID="CropedImage" runat="server" Visible="false"  />
       
   
        
<asp:Label ID="lblFileName" runat="server"></asp:Label>
   
</div>

</form>
</body>

</html>
            
                 C# Coding


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


public partial class ImageCrop : System.Web.UI.Page
{
    string name;       

    protected void Page_Load(object sender, EventArgs e)
    {

    }  
     protected void Button2_Click(object sender, EventArgs e)
    {
        ///////  Upload Image   ////////

        ImageCroped.Visible = true;

        lblFileName.Text = FileUpload1.FileName;
        name = Path.GetFileName(FileUpload1.PostedFile.FileName);

        string UploadFilePath = Path.Combine(Server.MapPath("~/Uploads"), name);

        FileUpload1.SaveAs(UploadFilePath);
        ImageCroped.ImageUrl = "~/Uploads/" + name;

        ///////  Upload Image   ////////

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

       ////// After Croped Image   ///////

        int x = Convert.ToInt32(XAxis.Value);
        int y = Convert.ToInt32(YAxis.Value);
        int h = Convert.ToInt32(Height.Value);
        int w = Convert.ToInt32(Width.Value);
      

        string fileName = Path.GetFileName(ImageCroped.ImageUrl);
        string imagePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
     
        System.Drawing.Image imgToCrop1 = Bitmap.FromFile(imagePath);
        Bitmap btmap = new Bitmap(w, h, imgToCrop1.PixelFormat);

        Graphics graphcs = Graphics.FromImage(btmap);
        graphcs.DrawImage(imgToCrop1, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);

        string cropedImagePath = Server.MapPath("Uploads/" + lblFileName);
        btmap.Save(cropedImagePath);
        CropedImage.Visible = true;
        CropedImage.ImageUrl = "Uploads/" + lblFileName;

        ////// After Croped Image   ///////
     
    }
  
   

}



First - Create the New Web From - Add - Image control - File Upload Control -Input Button - After Croped - Image Control 





 Next - Add the Id Values For  Controls





Next - Add the Jquery Plugins & Scripts 




Show The All Controls Html Codings




Next - Add the Name Spaces - Add the Upload Codings 

Create to the Image Path Folder





Next - Add the Croped Image  Codings - Get file Name  & Image Path Name 





Run[F5]-  the Program To Crop The Image

OUTPUT







2 comments:

  1. i used asp.net mvc to crop an image
    http://www.codingsack.com/2015/12/20/run-time-crop-images-with-asp-net-mvc-generic-handler/

    ReplyDelete
  2. Hello Sir,
    Thank you for the wonderful example
    I have a question , If I have a large collection of pictures and I want to make crop and save
    Is there a way to do that?
    So that they are cut once with the same measurements

    ReplyDelete