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

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

jQuery JCrop

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

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

    <%@ Page Language="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>  
          <form id="form1" runat="server">  
             <div>  
                <asp:Panel ID="pnlUpload" runat="server">  
                   <asp:FileUpload ID="Upload" runat="server" />  
                   <br />  
                   <asp:Button ID="btnUpload" runat="server" OnClick="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" OnClick="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/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>  
    <script type="text/javascript" src="script/jquery.Jcrop.pack.js"></script>  
    <script type="text/javascript">  
       jQuery(document).ready(function()
       {    
          jQuery('#imgCrop').Jcrop
         ({  
             onSelect: storeCoords   
         });           });  
       function storeCoords(c) {  
         
       jQuery('#X').val(c.x);       
       jQuery('#Y').val(c.y);       
       jQuery('#W').val(c.w);           
   jQuery('#H').val(c.h);  
         
       };  
         
    </script>

 

 

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

 

using System.IO;  
using SD = System.Drawing;  
using System.Drawing.Imaging;  
using System.Drawing.Drawing2D;  
String path = HttpContext.Current.Request.PhysicalApplicationPath + "images\\";  
protected void Page_Load(object sender, EventArgs e)  
{  
}  
protected void btnUpload_Click(object sender, EventArgs e)  
{  
   Boolean FileOK = false;  
   Boolean FileSaved = false;  
   if (Upload.HasFile)  
   {  
      Session["WorkingImage"] = Upload.FileName;  
      String FileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();  
      String[] allowedExtensions = { ".png", ".jpeg", ".jpg", ".gif" };  
      for (int i = 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();  
   }  
}  
protected void btnCrop_Click(object sender, EventArgs e)  
{  
   string ImageName = Session["WorkingImage"].ToString();  
   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);  
         pnlCrop.Visible = false;  
         pnlCropped.Visible = true;  
         imgCropped.ImageUrl = "images/crop" + ImageName;  
      }  
   }  
}  
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);  
   }  
}

 

 

 

  • پسورد: www.mspsoft.com
محمد نجفی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم