یک روز ، یک جمله ...

امروز به هر کاری که قراره انجام بدی، باور داشته باش

07 ارديبهشت

آپلود و برش عکس با jQuery JCrop و ASP.NET

با مقاله آموزش برش تصاویر این بار با jQuery JCrop با شما هستیم.

در مقاله آموزشی برش تصاویر به زبان سی شارپ وASP.NET که توسط یک کلاس برش انجام میدادیم این بار توسط jQuery قبل از آپلود آن را برش میزنیم و آن را آپلود میکنیم خلاصه در این مقاله یاد میگیریم که چگونه با استفاده از jQuery JCrop و ASP.NET یک عکسی را آپلود کنیم و برش دهیم.

کد زیر را برای فرم ASPX قرار بدید :

<%@PageLanguage="C#";AutoEventWireup="true"CodeFile="UploadAndCrop.aspx.cs"Inherits="UploadAndCrop"%>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:Panel ID="pnlUpload"runat="server">
<asp:FileUpload ID="Upload"runat="server"/>
<br/>
<asp:Button ID="btnUpload"runat="server"On-Click="btnUpload_Click"Text="Upload"/>
<asp:Label ID="lblError"runat="server"Visible="false"/>
</asp:Panel>
<asp:Panel ID="pnlCrop"runat="server"Visible="false">
<asp:Image ID="imgCrop"runat="server"/>
<br/>
<asp:HiddenField ID="X"runat="server"/>
<asp:HiddenField ID="Y"runat="server"/>
<asp:HiddenField ID="W"runat="server"/>
<asp:HiddenField ID="H"runat="server"/>
<asp:Button ID="btnCrop"runat="server"Text="Crop"On-Click="btnCrop_Click"/>
</asp:Panel>
<asp:Panel ID="pnlCropped"runat="server"Visible="false">
<asp:Image ID="imgCropped"runat="server"/>
</asp:Panel>
</div>
</form>
</body>
</html>
<link href="/css/jquery.Jcrop.css"rel="stylesheet"type="text/css"/>
<script type="text/j-avascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/j-avascript"src="script/jquery.Jcrop.pack.js"></script>
<script type="text/j-avascript">
jQuery(document).ready(function()
{
jQuery('#imgCrop').Jcrop
({
onSelect:storeCoords
}); });
functionstoreCoords(c){

jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);

};

</script>

و کد زیر را برای فایل .cs فرم بنویسید :

usingSystem.IO;
usingSD=System.Drawing;
usingSystem.Drawing.Imaging;
usingSystem.Drawing.Drawing2D;
Stringpath=HttpContext.Current.Request.PhysicalApplicationPath+"images\\";
protectedvoidPage_Load(objectsender,EventArgse)
{
}
protectedvoidbtnUpload_Click(objectsender,EventArgse)
{
Boolean FileOK=false;
Boolean FileSaved=false;
if(Upload.HasFile)
{
Session["WorkingImage"]=Upload.FileName;
StringFileExtension=Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
String[]allowedExtensions={".png",".jpeg",".jpg",".gif"};
for(inti=0;i<allowedExtensions.Length;i++)
{
if(FileExtension==allowedExtensions[i])
{
FileOK=true;
}
}
}
if(FileOK)
{
try
{
Upload.PostedFile.SaveAs(path+Session["WorkingImage"]);
FileSaved=true;
}
catch(Exception ex)
{
lblError.Text="File could not be uploaded."+ex.Message.ToString();
lblError.Visible=true;
FileSaved=false;
}
}
else
{
lblError.Text="Cannot accept files of this type.";
lblError.Visible=true;
}
if(FileSaved)
{
pnlUpload.Visible=false;
pnlCrop.Visible=true;
imgCrop.ImageUrl="images/"+Session["WorkingImage"].ToString();
}
}
protectedvoidbtnCrop_Click(objectsender,EventArgse)
{
stringImageName=Session["WorkingImage"].ToString();
intw=Convert.ToInt32(W.Value);
inth=Convert.ToInt32(H.Value);
intx=Convert.ToInt32(X.Value);
inty=Convert.ToInt32(Y.Value);
byte[]CropImage=Crop(path+ImageName,w,h,x,y);
using(MemoryStream ms=newMemoryStream(CropImage,0,CropImage.Length))
{
ms.Write(CropImage,0,CropImage.Length);
using(SD.Image CroppedImage=SD.Image.FromStream(ms,true))
{
stringSaveTo=path+"crop"+ImageName;
CroppedImage.Save(SaveTo,CroppedImage.RawFormat);
pnlCrop.Visible=false;
pnlCropped.Visible=true;
imgCropped.ImageUrl="images/crop"+ImageName;
}
}
}
staticbyte[]Crop(stringImg,intWidth,intHeight,intX,intY)
{
try
{
using(SD.Image OriginalImage=SD.Image.FromFile(Img))
{
using(SD.Bitmap bmp=newSD.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,newSD.Rectangle(0,0,Width,Height),X,Y,Width,Height,SD.GraphicsUnit.Pixel);
MemoryStream ms=newMemoryStream();
bmp.Save(ms,OriginalImage.RawFormat);
returnms.GetBuffer();
}
}
}
}
catch(Exception Ex)
{
throw(Ex);
}
}

رضا اردانه

مدیریت وب سایت آموزش دیجیتال

نظر دادن

خبرنامه

برای دریافت جدیدترین خبرهای سایت در خبرنامه عضو شوید