ورود / ثبت نام
0
0

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

404 بازدید
jQuery JCrop

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
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=13614
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
محمد نجفی
مطالب بیشتر
برچسب ها:

نظرات

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.