Makale Özeti

Bilgi ve materyal hırsızlığının ve üstelik ilgili bilgi ve materyallerin kaynağının gösterilmemesi oldukça sık rastlanan bir durum. Bu durumun önüne geçmek ise hemen hemen imkansız. Mouse ile sağ tıklamanın engellenmesi gibi eski oyunları aşmak ise az çok teknik bilgisi olan birisi için sadece birkaç dakikalık iş. Korumaya çalıştığımız materyal web üzerinde herhangi bir şekilde yayımlanıyorsa, bu materyalin korunmasından bahsetmek hemen hemen imkansız fakat yine de alabileceğimiz bazı önlemler var.

Makale


Fotoğraflara otomatik olarak logo eklemek


Bilgi ve materyal hırsızlığının ve üstelik ilgili bilgi ve materyallerin kaynağının gösterilmemesi oldukça sık rastlanan bir durum. Bu durumun önüne geçmek ise hemen hemen imkansız. Mouse ile sağ tıklamanın engellenmesi gibi eski oyunları aşmak ise az çok teknik bilgisi olan birisi için sadece birkaç dakikalık iş. Korumaya çalıştığımız materyal web üzerinde herhangi bir şekilde yayımlanıyorsa, bu materyalin korunmasından bahsetmek hemen hemen imkansız fakat yine de alabileceğimiz bazı önlemler var. Örneğin JPG formatındaki fotoğraflara web sitenizin logosunu eklemek gibi basit bir işlem Photoshop gibi uygulamaları kullanmayı bilmeyen ve yine de fotoğraflarınızı kullanmak isteyenleri engelleyebilir.

Bu makalemizde web sitenizde fiziksel olarak sunulan JPG formatındaki fotoğraflarınıza web sitenizin logosunu ekleyeceğiz. Bu işlemi fotoğraflar sunucuya yüklenirken değil, IIS resimlerinizi sunarken yapacağız. Ayrıca "width" isimli bir parametre ile resimlerimizi boyutlandırma işlemini de yapacağı ki, belirli bir küçük boyutta resim göstermek istediğinizde logonuz eklenmeyecek. Bu işlemi resimlerin küçük görsellerini gösterirken sorun yaşamamak adına yapacağız. Ayrıca bazılarınız bunun sunucuya ek bir yük getireceğini düşünebilir ve kesinlikle haklı bir düşüncedir. Fakat makalenin çıkış noktası performans değil, otomatik logo ekleme işleminin nasıl yapılacağıdır. Önbellekleme (cache) gibi eklemeleri kendiniz, dilediğinizce, yapabilir ve performans konusundaki sorunları çözebilirsiniz. Ayrıca, logonun fotoğraflara bu şekilde eklenmesinin en büyük avantajı, web sitenizin logosunu değiştirmek istediğinizde bunu sadece bir dosyayı, logo dosyasını, değiştirerek yapabilecek olmanızdır.

Not: İstanbul ile ilgili örnek resimler http://www.bing.com/images/search?q=istanbul adresinden alışmıştır.


Öncelikle Visual Studio veya Visual Web Developer ile boş bir Web Sitesi projesi oluşturup, "Images" klasörü altına birkaç JPG formatlı fotoğraf ve bir de "/Makaleler/Resimler/1000002326_logo.gif" isimli logomuzu ekleyelim:



"/Makaleler/Resimler/1000002326_logo.gif" isimli dosyamız, fotoğrafların üzerine otomatik olarak eklenecek olan logodur. Ben arka plan rengi beyaz olan basit bir "sunali.com" logosu hazırladım:



.NET Framework içerisinde, bir dosyanın istemciye (client) nasıl gönderilmesi gerektiğini belirleyebileceğiniz en basit birimlerden bir tanesi HttpHandler. HttpHandler oluşturmak son derece basit ve birçok durumda oldukça işlevsel amaçlarla kullanılabiliyor. Bu konuda yazılmış oldukça detaylı bir makale olduğu için çok fazla detayına girmeyeceğim fakat dileyenler Burak Selim Şenyurt'un yazdığı makaleye http://www.csharpnedir.com/articles/read/?id=692 adresinden ulaşabilirler.

Şimdiki adımımın App_Code klasörü içerisinde LogoHttpHandler.cs isminde bir class dosyayı oluşturmak:



Ve sonrasında LogoHttpHandler class'ını System.Web.IHttpHandler interface'ini uygular hale getirmek:



Web sitemize eklemiş olduğumuz HttpHandler class'ını IIS'in tanıması için web.config dosyamıza eklememiz gerekiyor. Aşağıda görmüş olduğunuz satırın anlamı "Images" klasörü altındaki herhangi isimdeki bir "jpg" dosyası istendiğinde, istemciye verilecek olan cevabı LogoHttpHandler isimli HttpHandler class'ının belirleyeceği:

    <httpHandlers>
        <add verb="GET,HEAD" path="Images/*.jpg" type="LogoHttpHandler" validate="true"/>
    </httpHandlers>


Şimdi kodumuzu yazmaya başlayabiliriz. Bunun için ProcessRequest fonksiyonu içerisinde kendi fonksiyonumu çalıştırmamız ve kendi fonksiyonumuz içerisinde de fotoğraf üzerine logo ekleme işlemini yapmamız yeterli:



Ve işte geriye kalan tüm işlemi yapacak olan kodumuz:

    // Eger istenilen fotograf dosyasi bulunmuyorsa,
    // islemi bitir ve 404 hatasi gonder.
    if (!System.IO.File.Exists(context.Request.PhysicalPath))
    {
        context.Response.StatusCode = 404;
        context.Response.Status = "404 Not Found";
        return;
    }

    // Istenilen fotografi Image objesi olarak ac.
    Image image = Image.FromFile(context.Request.PhysicalPath);
    // Logoyu Image objesi olarak ac.
    Image logo = Image.FromFile(context.Server.MapPath("/Makaleler/Resimler/1000002326_logo.gif"));
    // Uzerinde bircok cizim islemini yapabilecegimiz
    // Graphics objesini null olarak olustur.
    Graphics graphic = null;

    // QueryString kullanilarak gonderilen "width" parametresi
    // olup olmadigina bakalim ve bu degeri "int" degere
    // donusturmeye calisalim. Eger basaramazsak, width degiskenine
    // istenilen fotografin orjinal Width degerini atayalim.
    int width = 0;
    int height = 0;
    string widthString = context.Request.QueryString["width"];
    if (!string.IsNullOrEmpty(widthString))
    {
        if (!int.TryParse(widthString, out width))
        {
            width = image.Width;
        }
    }

    // QueryString kullanilarak gonderilen "width" parametresi
    // sifir/negatif veya bos bir deger olabilir. Bu durumda orjinal
    // fotografin genisligini kullanmaliyiz.
    if (width <= 0)
    {
        width = image.Width;
    }

    // Eger istenilen genislik ile resmin genisligi ayni degilse
    // yuksekligi de ayni oranda kucultmemiz/buyutmemiz gerekmektedir.
    // Bu sefeple yeni yuksekligi hesaplayacagiz ve "height" degiskeninde
    // saklayacagiz.
    if (width != image.Width)
    {
        height = (int)Math.Floor(image.Height * (new decimal(width) / image.Width));
    }
    else // Buyutme/kucultme yapilmayacaksa, yukseklik orjinal fotograf ile aynidir.
    {
        height = image.Height;
    }

    // Yeni fotografimizi tutacagimiz Bitmap objemizi yeni boyutlariyla olusturalim.
    Bitmap newImage = new Bitmap(width, height, image.PixelFormat);
    // "graphic" degiskeninde tutacagimiz Graphics objemizi yeni ve bos "Bitmap" ile olusturalim.
    graphic = Graphics.FromImage(newImage);
    // Orjinal fotografimizi yeni boyutu ile resme cizelim.
    graphic.DrawImage(image, 0, 0, width, height);

    // Fotografin kalitesini ayarlayalim.
    graphic.SmoothingMode = SmoothingMode.HighQuality;
    graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;

    // Eger istenilen fotograf boyutu 150 pixel'den buyukse,
    // logoyu fotografa ekleyelim.
    if (width > 150)
    {
        // Logonun fotograf uzerinde koyulacagi pozisyonu
        // Point objesi olarak tanimla.
        Point logoLocation = new Point();
        logoLocation.X = newImage.Width - logo.Width - 5;
        logoLocation.Y = newImage.Height - logo.Height - 5;

        // Logoyu fotografin uzerine ciz.
        graphic.DrawImage(logo, logoLocation);
    }

    // Istemciye gonderilecek olan icerigi temizle ve
    // icerik tipinin "image/jpg" olacagini belirt
    context.Response.Clear();
    context.Response.ContentType = "image/jpg";

    // Image objesini Response objesinin "OutputStream" ozelligine yaz.
    newImage.Save(context.Response.OutputStream, ImageFormat.Jpeg);

    // Objeleri dispose et.
    graphic.Dispose();
    newImage.Dispose();
    image.Dispose();
    logo.Dispose();

Şimdi Internet Explorer aracılığı ile Images klasörü içerisinde bulunan resim3.jpg isimli dosyamızı görelim.

Adres: http://localhost/WebSite/Images/resim3.jpg
Sonuç:



Adres: http://localhost/WebSite/Images/resim3.jpg?width=200
Sonuç:



Görmüş olduğunuz gibi resim adresine ?width=200 ekleyerek, yükseklik orantısı bozulmamış fakat genişliği 200px yapılmış bir resim elde ettik. Ayrıca genişlik 150px'den büyük olduğu için logomuzu yine ekledik. Şimdi bir de 150 (veya daha küçük) boyutta bir resim isteyelim.

Adres: http://localhost/WebSite/Images/resim3.jpg?width=150
Sonuç:



Ve işte resim boyutu 150px'den küçük olduğu için herhangi bir logo eklenmedi.

Muhtemelen örnek vermeme gerek yoktur fakat ilgili resimleri <img> tag'ı ile kullanmanız tabiki mümkündür. Örneğin:

    <img src="/Images/resim3.jpg" />
    <img src="/Images/resim3.jpg?width=150" />
    <img src="/Images/resim3.jpg?width=400" />

Makalenin başında da belirttiğim gibi, yazmış olduğum kodu yazarken performans konusunda herhangi bir çabam olmadı. Makalenin amacı sadece ilgili fotoğraflara otomatik olarak logo eklenmesini göstermek. Geriye kalan her türlü optimizasyon sizin damak tadınıza kalıyor.


Makale ile ilgili tüm soru ve sorunlarınızı http://sunali.com adresinde yorum olarak sorabilirsiniz.
Makale ile ilgili kaynak kodları http://sunali.com/files/articles/sunali.fotograf-logo.src.zip [170KB] adresinden indirebilirsiniz.

Coskun SUNALI
http://sunali.com