ASP.NET etiketindeki makaleler 6. sayfa

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

ASP.NET

Prokon Konferans Sistemleri Web Sitesini Yeniledik

Yeni Makale

Web Sayfalarinda Otomatik Küçük Resim(Thumbnail) Olusturmak

YEMKitabevi.Com .NET Version Yayinda !

ASP.NET MVC Framework BETA Release Oldu