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 :
<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.
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
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 :
<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.
great.
ReplyDeletehttp://www.codingsack.com/2015/12/20/run-time-crop-images-with-asp-net-mvc-generic-handler/