Makale Özeti

Merhaba arkadaşlar, bu makalemizde bir çok uygulamada işimize yarayacak küçük resim(thumbnail) oluşturma işleminin nasıl yapıldığına bakacağız.

Makale

Birçok web sitesi, portal veya eticaret sitesi üzerinde örneğine rastlabileceğimiz resim gösterimlerinde ilk olarak kullanıcıya konu ile ilgili küçük bir resim(thumbnail) gösterilir ve kullanıcı kendi isteğine göre bu küçük resme tıklayarak resmi görüntüleyebilir. Bu kullanıcı için çok büyük sorun olmasa da içeriği sağlayan kişi yada kişiler için çok büyük iş yükü sağlar. Örneğin bir haber sitesi düşünelim; haber ile ilgili bir resim girdiğimiz de aynı resmin bir küçük resmini oluşturmak zorundayızdır. Hele bir de bu habere ait bir resim galerisi oluşturacaksak bu işe ayıracağımız süre uzar.

Bu makalede de bu ve bunun gibi sorunları çözebilmek için otomatik olarak küçük resimlerin oluşturulmasını sağlayacağız. Yapacağımız işlem aslında basit bir boyut küçültme işlemi gibi düşünebiliriz. Bunu da bizim için yapabilen bir metot var. Bu metot System.Drawing kütüphanesinde yer alan Image sınıfına ait GetThumbnailImage metodudur. Bu metotla resimlerin boyutlarını değiştirebiliriz.

Konuyla ilgili bir örnek yapalım. Yukarıda da bahsettiğimiz gibi bir portalımız olduğunu varsayalım. Herhangi bir habere de bir resim galerisi ekleyelim. Burada küçük resim ve birde resmin orijinal hali yer alır. Bu galeriyi giren kişi için çok uzun ve sıkıcı bir iştir. Bu yüzden biz resmi otomatik olarak yeniden boyutlandırsak tek bir resim girmesiyle galeriyi giren kişiye hem zaman kazandırırız hem de gereksiz yere hosting alanımızın boyutu yükselmez.

İlk olarak yeni bir web projesi oluşturalım. Sonrasında projemize bir adet Class ekleyelim. İlk olarak projemizin kütüphaneleri arasına aşağıdaki kütüphaneleri ekleyelim.

using System;
using System.Web;
using System.IO;
using System.Drawing;

Şimdi sınıfımızı yazalım.

//Oto resize isimli bir sınıf oluşturduk.

public class OtoResize

{

    //Resimlerimizi yeniden boyutlandırtıkdan sonra geriye byte dizisi olarak döndüreceğiz. Bunun için KucukResimOlustur isimli bir metot yazıyoruz. Bu metot static olsun ki sınıfı örneklemeden metodumuzu kullanabilelim.

    public static byte[] KucukResimOlustur(string dosyaYolu, int yukseklik, int genislik, string dosyaUzantisi)

    {

        dosyaYolu = HttpContext.Current.Server.MapPath(dosyaYolu);

        // Image tipinde bir değişken tanımlayıp, Image tipinin Fromfile metodunu kullanarak dosya yoluna göre resmi img değişkenenine gönderdik.

        Image img =  Image.FromFile (dosyaYolu);

        dosyaUzantisi = dosyaUzantisi.ToLower();

 

        byte[] buffer = null;

 

        //Resmin orjinal boyutlarını alıyoruz.

        int tempGenislik = img.Size.Width;

        int tempYukseklik = img.Size.Height;

 

        //Resmin yeniden boyutlandırılıp boyutlandırılamayacağına bakıyoruz.

        bool genislikResize = (genislik > 0 && tempGenislik > genislik && tempGenislik > yukseklik);

        bool yukseklikResize = (yukseklik > 0 && tempYukseklik > yukseklik && tempYukseklik > genislik);

 

        if (genislikResize || yukseklikResize)

        {

            int iStart;

            Decimal ayrac;

            //Resmi enine göre yeniden boyutlandırıyoruz.

            if (genislikResize)

            {

                iStart = tempGenislik;

                ayrac = Math.Abs((Decimal)iStart / (Decimal)genislik);

                tempGenislik = genislik;

                tempYukseklik = (int)Math.Round((Decimal)(tempYukseklik / ayrac));

            }

            else //resmi boyuna göre yeniden boyutlandırıyoruz.

            {

                iStart = tempYukseklik;

                ayrac = Math.Abs((Decimal)iStart / (Decimal)yukseklik);

                tempYukseklik = yukseklik;

                tempGenislik = (int) Math.Round((Decimal)(tempGenislik / ayrac));

            }

 

            // GetThumbnailImage metodunu kullanarak resmi yeniden boyutlandırıyoruz ve yeni resmi oluşturuyoruz.

            Image yeniResimDosyasi = img.GetThumbnailImage(tempGenislik, tempYukseklik, null, new System.IntPtr());

 

           // MemoryStream sınıfını kullanarak resmin çıktısını oluşturuyoruz.

            using (MemoryStream ms = new MemoryStream())

            {

                if (dosyaUzantisi.IndexOf("jpg") > -1)

                {

                    yeniResimDosyasi.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

                }

                else if (dosyaUzantisi.IndexOf("png") > -1)

                {

                    yeniResimDosyasi.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

                }

                else if (dosyaUzantisi.IndexOf("gif") > -1)

                {

                    yeniResimDosyasi.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);

                }

                else

                {

                    yeniResimDosyasi.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);

                }

 

                buffer = ms.ToArray(); 

            }

        }

        return buffer;

    }

}
 
Sınıfımızı yazdık, şimdi birde bu resmi otomatik olarak oluşturacak bir ara sayfa yapalım. Bu sayfa yukarıda ki parametreleri (dosyaYolu, yukseklik, genislik, dosyaUzantisi)alsın ve sınıfımızın içindeki KucukResimOlustur metoduna göndersin. Geri dönen değere göre de resimlerin çıktısını oluştursun. Projeme DinamikResim.aspx isimli bir sayfa ekledim. Şimdi load eventine gidip aşağıdakileri yazalım.


protected void Page_Load(object sender, EventArgs e)


{
if (!Page.IsPostBack)
{
Response.Clear();
//Parametreleri alıyoruz.
int yukseklik= 200;
int genislik = 250;
if (Request["genislik"] != null)
{
genislik = Int32.Parse(Request["genislik"].ToString ());
}
if (Request["yukseklik"] != null)
{
yukseklik = Int32.Parse(Request["yukseklik"].ToString ());
}
string ResimAdi = Request.QueryString["ResimAdi"];
string uzanti = System.IO.Path.GetExtension (Server.MapPath(ResimAdi));
//Parametreleri metodumuza gönderiyoruz...
byte[] pBuffer = OtoResize.KucukResimOlustur (ResimAdi, yukseklik,genislik,uzanti);
Response.ContentType = "image/" + uzanti;
//Sayfamızın contenttype'nı image olarak belirledik ve Resmimiz oluşturuluyor...
Response.OutputStream.Write(pBuffer, 0, pBuffer.Length);
Response.End();
}
}

Evet, ara sayfamızı da yazdık. Şimdi bunu kullanalım.

<img src="DinamikResim.aspx? ResimAdi=semgoksu.jpg&genislik=100" />
<br />
<img src="DinamikResim.aspx? ResimAdi=semgoksu.jpg&genislik=200" />
<br />
<img src="DinamikResim.aspx? ResimAdi=semgoksu.jpg&genislik=300" />



Dinamik ve resimde bozulma olmadan resimleri farklı boyutlarda görüntüleyebildik. :0) Şimdi projemize bir sayfa daha ekleyelim. Bu sayfada da bir çok resmi görüntüleyeceğiz. Ekleyeceğimiz sayfaya da galeri.aspx ismini verelim. Bu sayfada basitçe bir resim galerisi yapacağız. Galerimiz için gerekli Verileri database’den getireceğiz. Galeri isimli bir tablo oluşturalım.



Tablomuzu oluşturduktan sonra içerisine veriler girelim. Dosya yolu alanında sadece resimlerin dosya adını tutacağız. Açıklama alanında ise resimle ilgili bilgi yer alacak.



Şimdi sayfamızı hazırlayalım. İlk olarak sayfamıza datalist ve image nesnesi ekleyelim. Datalistte küçük resimler oluşacak. Üzerine geldiğimizde de image nesnesi üzerinde yine dinamik olarak oluşturacağımız büyük resim görüntülenecek.

Datalistimizin HTML Kodları

<script>
function ResimDegistir(dosyaYolu)
{
  document.getElementById('galeriBuyukResim').src ='DinamikResim.aspx?ResimAdi=images/'+ dosyaYolu + "&genislik=350";
}
</script>

 
Küçük resimlerin üzerine geldiğimizde büyük resmi yükleyecek javascript kodunu yazdık.

<img id="galeriBuyukResim" runat="server" /><br />

<br />

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<img src='<%# "DinamikResim.aspx?ResimAdi=images/"+ Eval("DosyaYolu")+ "&genislik=100" %>'

onmouseover="ResimDegistir('<% #Eval("DosyaYolu") %>')" /><br />

<%# Eval("Aciklama") %>

</ItemTemplate>

<ItemStyle Font- Bold="True" Font-Names="Trebuchet MS" Font- Size="12px" HorizontalAlign="Center"

Width="110px" />
</asp:DataList>
Verilerimiz de çekelim.

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ResimleriGetir();
}
}

private void ResimleriGetir()
{
SqlConnection Cnn = new SqlConnection("Server=.; Database=Netron; uid=sa; pwd=sa12345");
SqlDataAdapter Da = new SqlDataAdapter("Select * from Galeri",Cnn);
DataTable Dt = new DataTable();
Da.Fill(Dt);
DataList1.DataSource = Dt;
DataList1.DataBind ();
//Büyük resim için ilk resmi büyük resme yüklüyoruz.
galeriBuyukResim.Src = "DinamikResim.aspx?ResimAdi=images/"+Dt.Rows[0]["DosyaYolu"].ToString() + "&genislik=350&height=200";
}

Şimdi hazırız. Çalıştıralım,



İşte Sonuç… Resimler de herhangi bir bozulma yok. Tek bir resim kullanarak galerimizi oluşturduk. :0)

Bu makalenin de sonunda geldik. Başka bir makale de görüşmek üzere.

Makale ile ilgili dosyaları buradan indirebilirsiniz.


Sem Göksu

sem.goksu@yazilimgunlugu.com
www.semgoksu.com | www.yazilimgunlugu.com

Kaynaklar

www.msdn.com

www.codeproject.comMakalede kullandığım örnek proje