Asp.NET MVC 4.0 WebImage Nesnesi

Asp.NET MVC’nin en güzel, kullanışlı ve esnek nesnelerinden biri WebImage nesnesidir.WebImage nesnesi sayesinde resim yükleyebilir, yüklenen resmi görüntüleyebilir ve üzerinde efektsel işlemler gerçekleştirebiliriz.

Öncelikle WebImage nesnesinde en çok kullanılan metod ve propertyleri irdeleyelim.

Resize Metodu = Elimizdeki resmin boyut ayarlarıyla oynamak için kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.Resize(int width, int height, bool preserveAspectRatio, bool preventEnlarge);

Yukarıdaki örnek kodu inceleyiniz eğer,
“preserveAspectRatio” isimli parametre, resmimizde boyutlandırma işlemi yapılırken, genişlik ve yükseklik değerlerinin birbiriyle orantılı bir şekilde değişip değişmemesini sağlar.Eğer “true” değerini verirsek orantılı değişim gösterir, “false” değerini verirsek birbirlerinden bağımsız değişiklikler göstereceklerdir.

“preventEnlarge” isimli parametre ise, resim ile boyutlandırma işlemi sonucundaki elde edilen resim arasındaki boyut ilişkisi, orjinal resimden büyük ise boyutlandırma işlemi gerçekleşmeyecektir.”true” değerini alırsa bu özellik geçerli olacaktır.”false” değerini alırsa her türlü boyutlandırma yapılabilir.

Save Metodu = Resmi kaydetmeye yarar.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.Save(string filePath, string imageFormat);

Yukarıdaki örnek kodu incelerseniz eğer,
“filePayh” isimli parametreye, resmimizin kaydedileceği dizini veririz.
“imageFormat” isimli parametrede ise, resmimizin kaydedileceği dosya formatını belirleriz.

AddTextWatermark Metodu = Resim üzerine yazı tasarımı yedirmek için kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.AddTextWatermark(string text, string fontColor, int fontSize, string fontStyle, string fontFamily, string horizontalAlign, string verticalAlign, int opacity, int padding);

Yukarıdaki örnek kodu incelerseniz eğer,
“text” isimli parametreye, resmin üzerine yedireceğimiz yazıyı veririz.
“fontColor” isimli parametreyle, yazımızın rengini ayarlarız.
“fontSize” isimli parametreyle, yazımızın boyutunu ayarlarız.
“fontStyle” isimli parametreyle, yazımızın stilini ayarlarız.
“fontFamily” isimli parametreyle, yazımızın tipini ayarlarız.
“horizontalAlign” isimli parametre, yatay hizalama biçimini belirler.
“verticalAlign” isimli parametre, dikey hizalama biçimini belirler.
“opacity” parametresi, yazımızın saydamlık oranını belirler.
“padding” parametresi ise, eklenen yazı ile resim kenarlığı arasındaki mesafeyi belirler.

AddImageWatermark Metodu = Resim üzerine başka bir resim eklemek için kullanılan metoddur.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.AddImageWatermark(string watermarkImageFilePath, int width, int height, string horizontalAlign, string verticalAlign, int opacity, int padding);

Yukarıdaki örnek kodu incelerseniz eğer,
AddImageWatermark metodumuz da parametre olarak sadece “watermarkImageFilePath” isimli parametreyi inceleyeceğiz.Diğer parametreler yukarıdaki “AddTextWatermark” isimli metoddaki parametreler ile aynı işlevi görmektedir.Bu parametremimizin görevi ise, fligran olarak kullanılacak olan resmimizin dosya yolu ister.

Crop Metodu = Resmin belirli kısmını kesebilmek için kullanılır.Tabi programcı mantığıyla olaya bakarsak eğer, kesilen kısım ayrı bir resim olarak elimize geçecektir.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.Crop(int top, int left, int bottom, int right);

FlipHorizontal Metodu = Resmi yatay yönde tersine çevirmek amacıyla kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.FlipHorizontal();

FlipVertical Metodu = Resmi dikey yönde tersine çevirmek amacıyla kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.FlipVertical();

RotateLeft Metodu = Resmi dikey sola döndürmek amacıyla kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.RotateLeft();

RotateRight Metodu = Resmi sağa döndürmek amacıyla kullanılır.Örnek kullanımı;

            WebImage Resim = new WebImage("Resim Yolu");
            Resim.RotateRight();

Şimdi WebImage nesnemizin bir MVC projesinde uygulamalı örneğini yapalım.
Ben boş bir Asp.NET MVC projesi oluşturuyorum.
“Home(Controller).cs” isimli Controller sınımıza yukarıdaki bahsettiğim çeşitli işlevleri gören metodları gerçekleştirecek Action metodlarını yazalım.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ResmeYaziEkle(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.AddTextWatermark("Gençay Yıldız", "Black", 25, "Regular", "Arial", "Right", "Bottom", 50);
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmeResimEkle(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.AddImageWatermark(Server.MapPath("~/Content/Resimler/1831471Koala.jpg"), 250, 250, "Right", "Bottom", 50, 70);
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmiKes(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.Crop(300, 300, 300, 300);
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmiYatayCevir(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.FlipHorizontal();
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmiDikeyCevir(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.FlipVertical();
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmiSolaDondur(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.RotateLeft();
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }

        public ActionResult ResmiSagaDondur(string ResimYolu)
        {
            WebImage Resim = new WebImage(ResimYolu);
            Resim.RotateRight();
            Resim.Save(Server.MapPath(ResimYolu));
            return Redirect(ResimYolu);
        }
    }

Yukarıdaki sınıfı detaylı bir biçimde inceleyiniz.

Şimdi “Home(Controller).cs” isimli Controller sınıfımızın “Index” Action metodunun .cshtml görüntüsünü oluşturalım.Tasarımsal ve programatik kodlar aşağıdaki gibi olacaktır.

@{
    WebImage Resim = null;
    string ResimAdi = null;
    string ResimYolu = null;
    string BoyutlandirilmisResimYolu = null;
    int ResimBoyutu = 0;

    if (IsPost)
    {
        Resim = WebImage.GetImageFromRequest();
        if (Resim != null)
        {
            Random rstgele = new Random();
            ResimAdi = rstgele.Next(9999, 9999999) + Path.GetFileName(Resim.FileName);
            ResimYolu = @"~/Content/Resimler/" + ResimAdi;
            Resim.Save(ResimYolu);
            BoyutlandirilmisResimYolu = @"~/Content/Boyutlandirilmis/" + ResimAdi;
            Resim.Resize(100, 100, true, true);
            Resim.Save(BoyutlandirilmisResimYolu);
            ResimBoyutu = Resim.GetBytes().Length / 1024;
            Response.Write("Resim başarıyla yüklendi.");
        }
        else
        {
            Response.Write("Resim yüklenirken hata oluştu.");
        }
    }
}

<form action="" method="post" enctype="multipart/form-data">
    <text>Resim Seçiniz</text>
    <br />
    <input type="file" name="fuResim" id="fuResim" /><br />
    <input type="submit" value="Resmi Yükle" />
    <br />
    @if (ResimYolu != null)
    {
        <img src="@Href(BoyutlandirilmisResimYolu)" />
        <br />
        <a href="@Url.Action("ResmeYaziEkle", new { ResimYolu = ResimYolu })">Resme yazı ekle</a><br />
        <a href="@Url.Action("ResmeResimEkle", new { ResimYolu = ResimYolu })">Resme resim ekle</a><br />
        <a href="@Url.Action("ResmiKes", new { ResimYolu = ResimYolu })">Resmi kes</a><br />
        <a href="@Url.Action("ResmiYatayCevir", new { ResimYolu = ResimYolu })">Resmi yatay çevir</a><br />
        <a href="@Url.Action("ResmiDikeyCevir", new { ResimYolu = ResimYolu })">Resmi dikey çevir</a><br />
        <a href="@Url.Action("ResmiSolaDondur", new { ResimYolu = ResimYolu })">Resmi sola döndür</a><br />
        <a href="@Url.Action("ResmiSagaDondur", new { ResimYolu = ResimYolu })">Resmi sağa döndür</a><br />
    }
</form>

Yukarıdaki “Index.cshtml” sayfasında yaptığım işlemleri çok dikkatli bir şekilde incelemenizi tavsiye ediyorum.

Yaptığımız çalışmanın son ekran görüntüsü aşağıdaki gibi olacaktır.

Varsayalım ki, “Resmi yatay çevir” menüsüne tıklamış olayım.Görüntü aşağıdaki gibi olacaktır.

Gördüğünüz gibi, Windows 7 işletim sistemlerinde varsayılan olarak gelen ve hemen hemen herkesin tanıdığı Koala arkadaşımızı yatay olarak programatik çevirdir.Çok zevkli değil mi? 🙂

Asp.NET MVC’de WebImage nesnesi sayesinde bir çok prosedürel yöntem ve kodlardan kurtulmuş oluyoruz.
Faydalanmanız dileğiyle..

Bir sonraki yazımda görüşürüz..
İyi çalışmalar..