Bir Resmi Dinamik Olarak Url Parametreleri İle Resize Etme

Selamlar,

Bugün kaynağı verilen bir resmin istenen boyutlarını, Url’de belirleyip, memory’de resize edeceğiz. Buna Dynamically Resize Image On-The-Fly deniyor. Yani ilgili image’i herhangi bir fiziksel alana yazmadan, yeninden boyutlandırıyoruz.

image_9

Öncelikle ilgili static file’a browserda erişilmeye çalışıldığı zaman, ilgili Action’a gidilebilmesi için “CustomRouteHandler” tanımlanması gerekmektedir. Ayrıca Routing için de başdaki default “images” keyword’ünün ardından “{*ImageName}” şeklinde istenen uzunlukta text’in yazılabileceği alan tanımlanmıştır.

RouteConfig:

Şimdi sıra geldi custom olarak tanımlanan “CustomPNGRouteHandler” ‘ın oluşturmaya. Yukarıdaki resimde de görüldüğü gibi, çalışma adımlarında “IHttpHandler” “Page,Controller ve HttpHandler”‘ın hepsini kapsamakta ve tüm adımların temelini oluşturmaktadır. Yani tüm requestler “IHttpHandler“‘dan geçer. Bunu sakın unutmayın. “IRouteHandler” interfaceinden türetilen ilgili “CustomPNGRouteHandler” class’ı aşağıdaki gibi oluşturulur. Ayrıca daha en başta ilgili route’a gelindiği zaman, bir takım işlem adımlarına ait istenen kodun yazılabilmesi için “IHttpHandler”‘dan türetilmiş “CustomPNGHandler” sınıfı oluşturulmuştur.

CustomPNGRouteHandler:

CustomPNGHandler:  İşte bütün bussines’ın döndüğü yer burasıdır. Şimdi adım adım neler olur inceleyelim:

  1. Kısım SEO amaçlı resimin önüne konmuş olan bir Url Title’ın olup olmadığına bakılır. Var ise temizlenip, ham image ismi uzantısı ile “RealFileName” değişkenine atanır. Örnek: http://localhost:11590/images/cdn/seo-amacli-deneme-resmi-bear.jpg?w=600&h=400 . Yandaki koyu renkli text kaldırılıp, sadece resmin adı alınır. Ayrıca “imagePath“‘e resmin yolu atanır.
  2. Kısım Image’in gerçekten var olup olmadığına bakılır. Eğer yok ise defualt belirlenen bir resim atanır. Ayrıca eğer resmin adının başında herhangi bir SEO tanımlaması yoksa yine resmin var olup olmadığı durumlarına da burada bakılır.
  3. Kısım Bu bölümde “?w=600&h=300” gibi image’in resize edilmesi istenen boyutları url’den pars edilir: İlgili url 2 farklı yolla pars edilmiştir. 1. yöntemde Linq ve Regex kullanılmıştır. 2. yöntem de ise “char.IsDigit()” methodu ile sayısal alanlar alınmıştır. İlgili resize işlemi için gerekli “width ve height” değerlerinin alımında, 3 farklı durum söz konusudur:
    • 1. durum “width” ve “height“2 değerin de alınması ve “ResizeImage()” methodunun çağrılması.
    • 2. durum “width” ve “height” değerlerinden sadece 1 değerin gelmesi ve gelen değerin “0”‘dan büyük olması durumudur. Bu durumda “width ve height” değerlerinden hangisinin geldiğine bakılıp, gelmeyen değere “0” atanır ve “ResizeImage()” methodu çağrılır.
    • 3. durumda herhangi bir resize değeri gönderilmediği için, resmin orjinal boyutları ile ekrana basılır.

ResizeImage: İlgili image’in url’de belirlenen boyutlara göre boyutlandırıldığı yer burasıdır. Burda da 3 durum söz konusudur:

  1. Durum : En başta ilgili image’in Aspect Ratio’su “dblRatio” değişkenin atanır. Eğer gelen image boyutlarından birisi “0” ise bu değer, ilgili image’in bulunan Aspect Ratio oranı ile bilinen boyutuna göre hesaplanır.
  2. Eğer image’in resize amaçlı belirtilen boyutlarından biri “width veya height” image’in gerçek boyutundan büyük ise, kala alınmaz ve işleme image’in orjinal boyutuna göre devam edilir.
  3. Eğer belirtilen yeni boyutlar image’in yeni aspect ratio’suna uymuyor ise, büyük olan boyut sabit alınarak, diğer boyut aspect ratio oranına göre hesaplanır ve resize işlemi bu yeni boyutlara göre yapılıp oluşturulan yeni “Bitmap” geriye döndürülür.

Web.config: Tüm static filelara erişim yetkisi “runAllManagedModulesForAllRequests=true” değeri atanarak verilir. Yani *.* PNGs, PDFs, gibi tüm filelar da ASP.NET’in full pipe line’ına katılır. Eğer bu işlemi IIS tarafında halledilir ise çok daha performanslı bir iş yapmış olunur. Aşırı yük testi yapılarak sayfanın takip edilebilmesi için “ApplicationInsightsWebTracking” projeye eklenmiştir.

Geldik bir makalenin daha sonuna. Bu makalede static bir resmin, yerine göre nasıl farklı boyutlarda Aspect Ratio oranı bozulmadan Resize edilebileceğini ve static bir dosyaya Mvc Custom Routing ile nasıl erişilebileceğini hep beraber inceledik. Bu makalenin işinize yaramasını temenni eder, şimdiden başarılar dilerim.

Yeni bir makalede görüşmek üzere hepinize hoşçakalın.

Source Code: https://github.com/borakasmer/OnMemoryResizeImage

Kaynaklar : Scott Hanselman Blog, Msdn Magazine

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

6 Cevaplar

  1. Fatih dedi ki:

    Paylaşımınız için teşekkürler Bora bey. Aynı işlemi yapan hazır bir bileşen de mevcut.
    http://imageresizing.net/

    • borsoft dedi ki:

      Teşekkürler Fatih,
      Imagelerin başına SEO amaçlı url text desteği veren bir servis şu anda yok.

      • Fatih dedi ki:

        resmin adını bu-benim-resmim.jpg olarak kaydedersek ve uygulamada src=”bu-benim-resmim.jpg?w=100″ olarak kullanırsak olur sankimsi

        • borsoft dedi ki:

          Selam Ferih,

          İşte burada amaç resmin adını o şekilde değiştirmemek. Bu makalede anlattığım örnekde, resmin önüne “-” istenen herşey yazılabiliyor. Mesela haber title. Hem de resmin adından bağımsız :) Bu gerçekten önemli bir konu. Tüm resimlerin ismini haber title yapamazsınız. Hatta yapmamalısınız. Haberin başlığını değişince resmin adınıda mi değiştiriceğiz :) Seo amaçlı resim adları kısaca önemli.

          İyi çalışmalar.

  2. Ferih dedi ki:

    kolay gelsin yazı için elinize sağlık benim konuyla alakasız bir sorum olacaktı sizin tecrübelerinize göre kolay bir soru olabilir kusura bakmayın haber sitelerinde veya blog sitelerinde kullanılan text editorlerde kullanılan alana script yazarak bir açık oluşabiliyor bu açığı nasıl kapatılıyor teşekkürler

    • borsoft dedi ki:

      Selam Ferih,

      Aslında birçok yolu var. Mesela şu şekilde ‘@RenderSection(“body_scripts”, false)’önlem alabilirsin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir