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

 Crop Image in 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

                  Download Coding


                   Html Coding 

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

<!DOCTYPE html>

<html xmlns="">

<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)


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


    <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>


                 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);

        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);
        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



Post a Comment