Asp.Net
15
Ara
2011
Asp.Net jCrop
Kategori : Asp.NetjQueryAccess
Ekleyen : Zekeriya Alan
Merhaba, Değerli Arkadaşlar bugün sizlere Asp.Net ve jQuery ile Resim Kırpma - Crop -'lama işlemi nasıl yapılır bundan bahsedeceğim. Web projelerimizde çoğu zaman içinden çıkılmaz hale gelen resim boyutlandırma işlemi bildiğiniz gibi epey zamanımızı almakla birlikte sinir katsayımızıda yükseltmekte oldukça etkili oluyor. Artık bu soruna bir dur deme zamanı geldi, diyerek projeme başlıyorum. Projemizde kullanacağımız jQuery Crop scriptimizi aşağıdaki adresten indirebilirsiniz.
Jcrop-0.9.9 (zip format)
Kırpma işleminden sonra resmimizin ismini veritabanında tutacağımız için birde Access veritabanına ihtiyacımız olacak.
Veritabanımızıda oluşturduğumuza göre, şimdi FileUpload işlemini yapacak sayfamızı oluşturmaya başlayabiliriz.
Default.aspx sayfamız.
   1:  <h2>Asp.Net jQuery jCrop</h2>
   2:   
   3:  <div class="divClass">
   4:      <asp:FileUpload ID="FileUpload1" runat="server" />
   5:  </div>
   6:      
   7:  <div class="divClass">
   8:      <asp:Button ID="Button1" runat="server" Text="Gönder" onclick="Button1_Click" />
   9:  </div>
Default.aspx.cs
   1:  protected void Button1_Click(object sender, EventArgs e)
   2:  {
   3:      if (FileUpload1.HasFile)
   4:      {
   5:          string dosyaAdi = Guid.NewGuid().ToString().Substring(0, 12) + FileUpload1.PostedFile.FileName.Remove(0, FileUpload1.PostedFile.FileName.LastIndexOf("."));
   6:          string dosyaYolu = Server.MapPath("~/images/" + dosyaAdi);
   7:   
   8:          Session["DosyaAdi"] = dosyaAdi;
   9:          FileUpload1.SaveAs(dosyaYolu);
  10:   
  11:          Response.Redirect("ResimKaydet.aspx");
  12:      }
  13:  }
Standart bir file upload kodu yazdım, file upload işlemi yaparken upload ettiğimiz dosyanın adını değiştiriyoruz ve değişen bu adı Session a alıyoruz. Bunu yapmamızdaki amaç aynı isimle upload edilen dosyaların sunucuda karışmaması. Image Dosyasını sunucuya gönderdiğimize göre artık resmimize crop işlemi uygulayacağımız sayfayı tasarlayabiliriz.
Öncelikle jCrop işlemi yapacak olan jQuery kodlarını Asp.Net sayfamıza göre düzenlememiz gerekiyor.
   1:  <script type="text/javascript">
   2:      jQuery(function ($) {
   3:   
   4:          var jcrop_api, boundx, boundy;
   5:   
   6:          $('#image').Jcrop({
   7:              onChange: updatePreview,
   8:              onSelect: updatePreview,
   9:              aspectRatio: 4/3
  10:          }, function () {
  11:   
  12:          var bounds = this.getBounds();
  13:              boundx = bounds[0];
  14:              boundy = bounds[1];
  15:   
  16:              jcrop_api = this;
  17:          });
  18:   
  19:          function updatePreview(c) {
  20:              if (parseInt(c.w) > 0) {
  21:   
  22:                  $('#Top').val(c.x);
  23:                  $('#Left').val(c.y);
  24:                  $('#Bottom').val(c.w);
  25:                  $('#Right').val(c.h);
  26:   
  27:                  var rx = 100 / c.w;
  28:                  var ry = 80 / c.h;
  29:   
  30:                  $('#preview').css({
  31:                      width: Math.round(rx * boundx) + 'px',
  32:                      height: Math.round(ry * boundy) + 'px',
  33:                      marginLeft: '-' + Math.round(rx * c.x) + 'px',
  34:                      marginTop: '-' + Math.round(ry * c.y) + 'px'
  35:                  });
  36:              }
  37:          };
  38:   
  39:      });
  40:  </script>
9. satırda gördüğünüz kod ( aspectRatio: 4/3 ) resimleri bu değere göre çizmemize yarayacak olan aparatın hareketini belirtmemize yarıyor. 4/3 yerine 1 de yazabilirsiniz. 1 değeri resmin yükseklik ve genişlik oranını eşit çizmemizi sağlamaktadır.
22 - 23 - 24 - 25. satırlar ise sayfamızda bulunan gizli alanların resim üzerinden aldığı değerleri, sayfamızın kırpma işlemi yapacak olan kod kısmına taşımasını sağlayacak gizli alanlar olarak oluşturuyoruz. Sayfamızın genel görünümünü aşağıdan izleyebilirsiniz.
   1:  <h2>Asp.Net jQuery jCrop</h2>
   2:      
   3:  <asp:HiddenField ID="Top" runat="server" />
   4:  <asp:HiddenField ID="Left" runat="server" />
   5:  <asp:HiddenField ID="Bottom" runat="server" />
   6:  <asp:HiddenField ID="Right" runat="server" />
   7:   
   8:  <div class="divClass">
   9:      <asp:Image ID="image" runat="server"  />
  10:  </div>
  11:   
  12:  <div style="width:100px;height:100px;overflow:hidden;">
  13:      <asp:Image id="preview" runat="server" />
  14:  </div>
  15:  <asp:Button ID="Button1" runat="server" Text="Kırp :)" onclick="Button1_Click" />
Şimdi ise kırpma işlemini yapacak olan kodlarımızı yazmaya geçebiliriz.
   1:  protected void Page_Load(object sender, EventArgs e)
   2:  {
   3:      if (Session["DosyaAdi"] != null)
   4:      {
   5:          image.ImageUrl = "images/" + Session["DosyaAdi"].ToString();
   6:          preview.ImageUrl = "images/" + Session["DosyaAdi"].ToString();
   7:      }
   8:      else
   9:      {
  10:          Response.Redirect("Default.aspx");
  11:      }
  12:  }
  13:  protected void Button1_Click(object sender, EventArgs e)
  14:  {
  15:      string fileName = Session["DosyaAdi"].ToString();
  16:   
  17:      int X = int.Parse(Top.Value);
  18:      int Y = int.Parse(Left.Value);
  19:      int W = int.Parse(Bottom.Value);
  20:      int H = int.Parse(Right.Value);
  21:   
  22:      byte[] Cropfile = Crop(Server.MapPath("~/images/") + fileName, X, Y, W, H);
  23:   
  24:      MemoryStream ms = new MemoryStream(Cropfile, 0, Cropfile.Length);
  25:      ms.Write(Cropfile, 0, Cropfile.Length);
  26:   
  27:      using (System.Drawing.Image Crops = System.Drawing.Image.FromStream(ms, true))
  28:      {
  29:          string NewName = Guid.NewGuid().ToString().Substring(0, 12) + fileName.Remove(0, fileName.LastIndexOf("."));
  30:          Crops.Save(Server.MapPath("~/images/Crop/") + NewName, Crops.RawFormat);
  31:   
  32:          using (OleDbConnection con = new OleDbConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString))
  33:          {
  34:              using (OleDbCommand cmd = new OleDbCommand("Insert Into Resimler(ResimAdi) Values (@ResimAdi)", con))
  35:              {
  36:                  cmd.Parameters.AddWithValue("@ResimAdi", NewName);
  37:                  con.Open();
  38:                  cmd.ExecuteNonQuery();
  39:                      
  40:                  System.IO.File.Delete(Server.MapPath("~/images/" + fileName)); 
  41:              }
  42:          }
  43:          Response.Redirect("Resimler.Aspx");
  44:      }
  45:  }
  46:   
  47:  public static byte[] Crop(string resim, int X, int Y, int Width, int Height)
  48:  {
  49:      using (System.Drawing.Image OriginalImage = System.Drawing.Image.FromFile(resim))
  50:      {
  51:          Bitmap bmp = new Bitmap(Width, Height);
  52:          bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
  53:   
  54:          Graphics graphic = Graphics.FromImage(bmp);
  55:          graphic.SmoothingMode = SmoothingMode.AntiAlias;
  56:          graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
  57:          graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
  58:          graphic.DrawImage(OriginalImage, new Rectangle(0, 0, Width, Height), X, Y, Width, Height, GraphicsUnit.Pixel);
  59:   
  60:          MemoryStream ms = new MemoryStream();
  61:          bmp.Save(ms, OriginalImage.RawFormat);
  62:             
  63:          return ms.GetBuffer();
  64:      }
  65:  }
Page_Load kısmında sessionda resim adı olup olmadığını kontrol ediyoruz, var ise image nesnemize resmimizi yükletiyoruz. Button Clik olayında, Sessionda bulunan Resimadını string bir değişken üzerine alıyoruz. Hemen altında ise resim üzerinde seçtiğimiz alanları kod tarafındaki yeni değişkenleri üzerine alıyoruz. Daha sonraki satırda ise aldığımız bu degerleri byte dizisi olarak resmi kırpacak olan metodumuza gönderiyoruz. metotdan dönen değere göre resmimizi yeniden adlandırıp Access veritabanımıza kayıt işlemini gerçekleştiriyoruz ve ilk gönderdiğimiz image dosyasini bulunduğu dizinden silmek için File.Delete komutunu çalıştırıyoruz. Bu işlemleri tamamladıktan sonra Resimlerimizin nasıl göründüğünü izlemek için Resimler.aspx sayfamızı oluşturuyoruz.
Resimler.aspx
   1:  <div class="divClass">
   2:  <h2>Asp.Net jQuery jCrop</h2>
   3:      <asp:DataList ID="DataList1" runat="server" RepeatColumns="5">
   4:      <ItemTemplate>
   5:          <div style="float:left; margin:5px;"><img src='<%# "images/Crop/" + Eval("ResimAdi") %>' alt="" style="width:150px;" /></div>
   6:      </ItemTemplate>
   7:      </asp:DataList>
   8:  </div>
Resimler.aspx.cs
   1:  public partial class Resimler : System.Web.UI.Page
   2:  {
   3:      protected void Page_Load(object sender, EventArgs e)
   4:      {
   5:          if (!Page.IsPostBack)
   6:          {
   7:              resimGetir();
   8:          }
   9:      }
  10:   
  11:      protected void resimGetir()
  12:      {
  13:          OleDbConnection con = new OleDbConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
  14:          OleDbCommand cmd = new OleDbCommand("Select * From Resimler", con);
  15:   
  16:          con.Open();
  17:   
  18:          OleDbDataReader dr = cmd.ExecuteReader();
  19:          DataTable tablo = new DataTable();
  20:          tablo.Load(dr);
  21:   
  22:          DataList1.DataSource = tablo.DefaultView;
  23:          DataList1.DataBind();
  24:   
  25:          dr.Close();
  26:          con.Close();
  27:      }
  28:  }
Geldik bir Makalemizin daha sonuna umarım isteklerinize karşılık verebilmişimdir.
Yeni yılın; Herkese sağlık, mutluluk ve barış dolu bir dünya getirmesini dilerim. Hoşçakalın...

Örnek Proje : Asp.Net jQuery jCrop
17 Aralık Cmt, 2011 Fuat Gönülkırmaz
Zekeriya hocam aklına sağlık çok güzel bir makale olmuş yine..
17 Aralık Cmt, 2011 Admin
Teşekkürler fuat :)
23 Temmuz Sal, 2013 ali yüceer
Güzel Ve açıklayıcı bir çalışma olmuş elinize sağlık
23 Eylül Pzt, 2013 Erkan KESKİN
Hocam http://prntscr.com/1sze5h resimdeki gibi bir hata ile karşılaşıyorum. Yani ; public static byte[] Crop(string img, int X, int Y, int Width, int Height) şu kısımda. Sizce neden olabilir ? Eksik yaptığım nedir ?
25 Eylül Çar, 2013 Admin
Merhaba, Projeyi aynı şekildemi çalıştırıyorsunuz. Yoksa kendi yazdığınız kodlardamı bu hatayı alıyorsunuz? Kendi yazdığınız ise Crop isimli metod ile aynı adı taşıyan bir sınıf olabilir. Kodları mail adresime gönderirseniz daha rahat inceleme şansı olabilir.
23 Temmuz Çar, 2014 Hakkı Fenerlioğlu
Script güzel ama benim takıldığım nokta belirli bir oranda büyütülüyor.İstediğim yöne çekemiyorum.Kare olarak alıyor sadece.Çözümü yazabilirseniz memnun kalırım.
07 Ağustos Per, 2014 Admin
aspectRatio: 4/3 -> ku kısımdan istediğiniz tipte kesim ayarlayabilirsiniz.
aspectRatio: 1 veya aspectRatio: 4/2 veya aspectRatio: 3/4
14 Ocak Per, 2016 Ekrem zr
Hocam 5 sene önce paylaşmışsın ama işimi görecek gibi, teşekkürler (: