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