Blog

Filmin Konusu
Alper 30lu yaslarda, gurme sayilacak düzeyde yemek kültürü olan kendi restoraninin sahibi iyi bir asçidir. Lüks yasamayi seven, isinde basarili ama özel yasantisini her gün farkli kadinlarla birlikte olarak düzene koyamamis, hayatini; yaptigi yemekler, günübirlik iliskiler, parali kadinlar üçgeninde yasayan birisi iken; Hayatinin akisi, bir gün Beyoglu` nun arka sokaklarinda, aradigi eski plak için bir kitapçiya girmesiyle degisir.

Ada 20` li yaslarinin sonlarinda, güzel, çocuk kostümleri tasarlayip diken, Alper` in modern yasaminin aksine çok mütevazi, hayatta fazla inisleri çikislari olmayan genç bir kadindir. Bir gün eski bir kitabi bulabilmek için Beyoglu` nda dolasirken Alper ile ayni kitapçiya girer. Çapkin bir adam olan Alper, Ada` nin güzelliginden etkilenir ve Ada` yi takip etmeye baslar. Ada` nin aradigi kitabi bulmustur. ilk sayfasina telefon numarasini yazar. Ada` nin isyerine kadar devam eden takip, Alper` in tanisma bahanesiyle aldigi kitabi Ada` ya vermesiyle son bulur. Ada ve Alper` in yasamlarinda ilk defa karsilastiklari tutkulu askin ilk sinyalleri bu kitapla baslar. Alper kopamadigi özgür hayatinin içersinde Ada` ya yer açmaya çalistikça, yasaminin daraldigini fark eder. Aski ve özgürlügü arasinda kalan Alper` in sessiz çigliklarini duyamayan Ada, kendini askin rüzgârina kaptirmistir bir kere; Ve yasam bir kere daha ask oyununun perdelerini Ada ve Alper için açacaktir.

Uzun zamandır makale yazmak istiyor fakat vakit bulupta bir türlü yazamıyordum. Sonunda vakit buldum ve Dinamik Resim Olusturma isimli makaleyi tamamladım. Makaleye ulasmak için burayı kullanabilirsiniz. Makale yi anlatan bir de örnek yaptım, umarım herkeze faydalı olur.

Makalede kullandıgım projeyi indirmek için buraya tıklayınız.

Merhaba arkadaslar, bu makalemizde bir çok uygulamada isimize yarayacak küçük resim(thumbnail) olusturma isleminin nasil yapildigina bakacagiz.

Birçok web sitesi, portal veya eticaret sitesi üzerinde örnegine rastlabilecegimiz resim gösterimlerinde ilk olarak kullaniciya konu ile ilgili küçük bir resim(thumbnail) gösterilir ve kullanici kendi istegine göre bu küçük resme tiklayarak resmi görüntüleyebilir. Bu kullanici için çok büyük sorun olmasa da içerigi saglayan kisi yada kisiler için çok büyük is yükü saglar. Örnegin bir haber sitesi düsünelim; haber ile ilgili bir resim girdigimiz de ayni resmin bir küçük resmini olusturmak zorundayizdir. Hele bir de bu habere ait bir resim galerisi olusturacaksak bu ise ayiracagimiz süre uzar.

Birçok web sitesi, portal veya eticaret sitesi üzerinde örnegine rastlabilecegimiz resim gösterimlerinde ilk olarak kullaniciya konu ile ilgili küçük bir resim(thumbnail) gösterilir ve kullanici kendi istegine göre bu küçük resme tiklayarak resmi görüntüleyebilir. Bu kullanici için çok büyük sorun olmasa da içerigi saglayan kisi yada kisiler için çok büyük is yükü saglar. Örnegin bir haber sitesi düsünelim; haber ile ilgili bir resim girdigimiz de ayni resmin bir küçük resmini olusturmak zorundayizdir. Hele bir de bu habere ait bir resim galerisi olusturacaksak bu ise ayiracagimiz süre uzar.

Bu makalede de bu ve bunun gibi sorunlari çözebilmek için otomatik olarak küçük resimlerin olusturulmasini saglayacagiz. Yapacagimiz islem aslinda basit bir boyut küçültme islemi gibi düsünebiliriz. Bunu da bizim için yapabilen bir metot var. Bu metot System.Drawing kütüphanesinde yer alan Image sinifina ait GetThumbnailImage metodudur. Bu metotla resimlerin boyutlarini degistirebiliriz.

Konuyla ilgili bir örnek yapalim. Yukarida da bahsettigimiz gibi bir portalimiz oldugunu varsayalim. Herhangi bir habere de bir resim galerisi ekleyelim. Burada küçük resim ve birde resmin orijinal hali yer alir. Bu galeriyi giren kisi için çok uzun ve sikici bir istir. Bu yüzden biz resmi otomatik olarak yeniden boyutlandirsak tek bir resim girmesiyle galeriyi giren kisiye hem zaman kazandiririz hem de gereksiz yere hosting alanimizin boyutu yükselmez.

Ilk olarak yeni bir web projesi olusturalim. Sonrasinda projemize bir adet Class ekleyelim. Ilk olarak projemizin kütüphaneleri arasina asagidaki kütüphaneleri ekleyelim.

usingSystem;
usingSystem.Web;
usingSystem.IO;
usingSystem.Drawing;

Simdi sinifimizi yazalim.

//Oto resize isimli bir sinif olusturduk.

public class OtoResize

{

    //Resimlerimizi yeniden boyutlandirtikdan sonra geriye byte dizisi olarak döndürecegiz. Bunun için KucukResimOlustur isimli bir metot yaziyoruz. Bu metot static olsun ki sinifi örneklemeden metodumuzu kullanabilelim.

    public static byte[] KucukResimOlustur(stringdosyaYolu, intyukseklik, intgenislik, stringdosyaUzantisi)

    {

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

        // Image tipinde bir degisken tanimlayip, Image tipinin Fromfile metodunu kullanarak dosya yoluna göre resmi img degiskenenine gönderdik.

        Imageimg =  Image.FromFile(dosyaYolu);

        dosyaUzantisi = dosyaUzantisi.ToLower();

 

        byte[] buffer = null;

 

        //Resmin orjinal boyutlarini aliyoruz.

        inttempGenislik = img.Size.Width;

        inttempYukseklik = img.Size.Height;

 

        //Resmin yeniden boyutlandirilip boyutlandirilamayacagina bakiyoruz.

        boolgenislikResize = (genislik > 0 && tempGenislik > genislik && tempGenislik > yukseklik);

        boolyukseklikResize = (yukseklik > 0 && tempYukseklik > yukseklik && tempYukseklik > genislik);

 

        if(genislikResize || yukseklikResize)

        {

            intiStart;

            Decimalayrac;

            //Resmi enine göre yeniden boyutlandiriyoruz.

            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 boyutlandiriyoruz.

            {

                iStart = tempYukseklik;

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

                tempYukseklik = yukseklik;

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

            }

 

            // GetThumbnailImage metodunu kullanarak resmi yeniden boyutlandiriyoruz ve yeni resmi olusturuyoruz.

            ImageyeniResimDosyasi = img.GetThumbnailImage(tempGenislik, tempYukseklik, null, newSystem.IntPtr());

 

           // MemoryStream sinifini kullanarak resmin çiktisini olusturuyoruz.

            using(MemoryStreamms = 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(); 

            }

        }

        returnbuffer;

    }

}
 
Sinifimizi yazdik, simdi birde bu resmi otomatik olarak olusturacak bir ara sayfa yapalim. Bu sayfa yukarida ki parametreleri (dosyaYolu, yukseklik, genislik, dosyaUzantisi)alsin ve sinifimizin içindeki KucukResimOlustur metoduna göndersin. Geri dönen degere göre de resimlerin çiktisini olustursun. Projeme DinamikResim.aspx isimli bir sayfa ekledim. Simdi load eventine gidip asagidakileri yazalim.


protectedvoid Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Response.Clear();
//Parametreleri aliyoruz.
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;
//Sayfamizin contenttype'ni image olarak belirledik ve Resmimiz olusturuluyor...
Response.OutputStream.Write(pBuffer, 0, pBuffer.Length);
Response.End();
}
}

Evet, ara sayfamizi da yazdik. Simdi bunu kullanalim.

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



Dinamik ve resimde bozulma olmadan resimleri farkli boyutlarda görüntüleyebildik. :0) Simdi projemize bir sayfa daha ekleyelim. Bu sayfada da resimleri görüntüleyecegiz. Ekleyecegimiz sayfaya da galeri.aspx ismini verelim. Bu sayfada basitçe bir resim galerisi yapacagiz. Verileri database'den getirecegiz. Galeri isimli bir tablo olusturalim.



Tablomuzu olusturduktan sonra içerisine veriler girelim. Dosya yolu alaninda sadece resimlere ait açiklama ve dosya adini tutacagiz.



Simdi sayfamizi hazirlayalim. Ilk olarak sayfamiza datalist ve image nesnesi ekleyelim nesnesi ekleyelim. Datalistte küçük resimler olusacak. Üzerine geldigimizde de image nesnesi üzerinde yine dinamik olarak olusturacagimiz büyük resim görüntülenecek.

Datalistimizin HTML Kodlari

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

 
Küçük resimlerin üzerine geldigimizde büyük resmi yükleyecek javascript kodunu yazdik.

<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="11px" HorizontalAlign="Center" Width="110px" />
</asp:DataList>
Verilerimiz de çekelim.

protectedvoid 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";
}

Simdi haziriz. Çalistiralim,

Iste Sonuç. Resimler de herhangi bir bozulma yok. Tek bir resim kullanarak galerimizi olusturduk. :0)

Bu makalenin de sonunda geldik. Baska bir makale de görüsmek üzere.

Sem Göksu

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

Kaynaklar

www.msdn.com
www.codeproject.com

Uzunca bir zamandir üzerinde çalistigim E-Ticaret sitesinin .NET Versiyonu yayina girdi. Henüz beta asamasinda oldugu için hatalar olabilir :) Eskisine göre çok daha sik ve islevsel oldu. Incelemenizi ve alisveris yapmanizi öneririm :) Siteye ulasmak için asagidaki adresi kullanabilirsiniz.

www.yemkitabevi.com