Thursday, 24 January 2013

Crop Image in ASP.NET using JCrop, JQuery (in masterpage)


Crop Image in ASP.NET using JCrop, JQuery (in masterpage)

This is to inform you all that jcrop  had a problem to crop in master pages but works good in aspx pages.
So i had a solution to use jcrop in masterpages....

Download working demo from the following link Click Here

After downloading open in ur vs and run it u will see an image and select a particular size as shown below.




 next step is press crop button

Now u can see the cropped image.

Coding in aspx page


<%@ Page Language="C#" MasterPageFile="~/MyMasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="ReddyInfoSoft" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link  href="crop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
   <script type="text/javascript" src="crop/js/jquery.Jcrop.min.js"></script>
    <script src="crop/script/0.9.8.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(document).ready(function () {
        jQuery('#<%= Image1.ClientID %>').Jcrop({
            onSelect: storeCoords
    });
  });
  function storeCoords(c) {
    jQuery('#<%= X.ClientID %>').val(c.x);
    jQuery('#<%= Y.ClientID %>').val(c.y);
    jQuery('#<%= W.ClientID %>').val(c.w);
    jQuery('#<%= H.ClientID %>').val(c.h);
  };
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h4 align="center" style="color: #FF0000">This is .aspx Page</h4>
    <p align="center">       
    <asp:Image ID="imgCropped" runat="server" />
     <br />
    <asp:Image ID="Image1" runat="server" Width="750px" Height="450px"/>
    <asp:HiddenField ID="X" runat="server" />        
    <asp:HiddenField ID="Y" runat="server" />
    <asp:HiddenField ID="W" runat="server" />
    <asp:HiddenField ID="H" runat="server" />
    <br />
    <asp:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
    <asp:Button ID="Button1" runat="server" Text="Back" OnClick="back_Click" />  
    <br />PoweredBy : &nbsp;
    <a href="http://www.ReddyInfoSoft.blogspot.in" target="_blank" rel="www.ReddyInfoSoft.blogspot.in">www.ReddyInfoSoft.blogspot.in</a>
    </p>
    
</asp:Content>

Coding in .cs file


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.IO;
using SD = System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Drawing;
using System.Net;

public partial class Default2 : System.Web.UI.Page
{
    String path;
    string ImageName;
    protected void Page_Load(object sender, EventArgs e)
    {
        Image1.ImageUrl = "~/cropedImage/3d_landscape_6.jpg";
        imgCropped.Visible = false;
        Image1.Visible = true;
        Button1.Visible = false;
    }

    protected void btnCrop_Click(object sender, EventArgs e)
    {
        try
        {
            ImageName = "3d_landscape_6.jpg";
            path = HttpContext.Current.Request.PhysicalApplicationPath + "cropedImage\\"; 
            int w = Convert.ToInt32(W.Value);
            int h = Convert.ToInt32(H.Value);
            int x = Convert.ToInt32(X.Value);
            int y = Convert.ToInt32(Y.Value);
            byte[] CropImage = Crop(path + ImageName, w, h, x, y);
            using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
            {
                ms.Write(CropImage, 0, CropImage.Length);
                using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
                {
                    string SaveTo = path + "crop" + ImageName;
                    CroppedImage.Save(SaveTo, CroppedImage.RawFormat);
                    imgCropped.ImageUrl = "cropedImage/crop" + ImageName;
                    imgCropped.Visible = true;
                    Image1.Visible = false;
                    Button1.Visible = true;
                    btnCrop.Visible = false;
                }
            }
        }
        catch (Exception ex)
        {
            string Errmsg = ex.Message;
        }
    }
    protected void back_Click(object sender, EventArgs e)
    {
        imgCropped.Visible = false;
        Image1.Visible = true;
        Button1.Visible = false;
        btnCrop.Visible = true;
    }
    static byte[] Crop(string Img, int Width, int Height, int X, int Y)
    {
        try
        {
            using (SD.Image OriginalImage = SD.Image.FromFile(Img))
            {
                using (SD.Bitmap bmp = new SD.Bitmap(Width, Height))
                {
                    bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
                    using (SD.Graphics Graphic = SD.Graphics.FromImage(bmp))
                    {
                        Graphic.SmoothingMode = SmoothingMode.AntiAlias;
                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        Graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, Width, Height), X, Y, Width, Height, SD.GraphicsUnit.Pixel);
                        MemoryStream ms = new MemoryStream();
                        bmp.Save(ms, OriginalImage.RawFormat);
                        return ms.GetBuffer();
                    }
                }
            }
        }
        catch (Exception Ex)
        {
            throw (Ex);
        }
    }
    public void Byte2Image(ref System.Drawing.Image NewImage, byte[] ByteArr)
    {
        MemoryStream ImageStream = default(MemoryStream);
        try
        {
            if (ByteArr.GetUpperBound(0) > 0)
            {
                ImageStream = new MemoryStream(ByteArr);
                NewImage = System.Drawing.Image.FromStream(ImageStream);
            }
            else
            {
                NewImage = null;
            }
        }
        catch (Exception ex)
        {
            NewImage = null;
        }
    }
}

Note : This is only for an educational purpose.

1 comment:

  1. great.
    http://www.codingsack.com/2015/12/20/run-time-crop-images-with-asp-net-mvc-generic-handler/

    ReplyDelete