MVCSHARP Ailesi ile yazılım geliştirmeye dair makaleler

Karşınızda WebImage

Merhaba arkadaşlar bu makalemizde başlığındanda anlaşılacağı gibi sizlere elimden geldiğince WebImage sınıfını tanıtacağım cool

Makalenin örneğini buradan indirebilirsiniz.

Öncelikle işleyeceğimiz nesneyi almayı görelim ve biraz özelliklerinden ve methodlarından bahsedelim ardından bir ugyulama yapalım.

WebImage image = WebImage.GetImageFromRequest("PostedImage");

GetImageFromRequest() methodu içerisine input file nesnemizin name özelliğini yazıyoruz.

       var oldname = image.FileName; // get
       image.FileName = "test.png";// set

FileName özelliği ile resmin adını öğrenebilir ve yeniden adlandırabilirsiniz.

     var h = image.Height; //get

Height özelliği ile resmimizin yükseklik bilgisini öğrenebiliriz.

var w = image.Width; //get

Width özelliğimiz ile resmimizin genişlik bilgisini öğrenebiliriz.

var format = image.ImageFormat;//get

ImageFormat özelliği bize resmimizin türünü verir. Örn; jpeg, gif...

Sıra geldi Methodlarımıza

image.RotateLeft();

RotateLeft ile resmi sola döndürebiliriz.

image.RotateRight();

RotateRight ile resmi sağa döndürebiliriz.

var copy = image.Clone();

Clone ile resmin kopyasını alabiliriz 

image.Crop(top: 150, left: 250, bottom: 300, right: 50);

Crop ile resmimizi kesip biçebiliriz. devil

image.FlipVertical();

FlipVertical ile resmimizi saat yönünün tersine 180 derece döndürürüz.

image.FlipHorizontal();

FlipHorizontal ile resmimize aynalama yaparız.

image.Resize(width: 500, height: 250, preserveAspectRatio: true, preventEnlarge: false);
//width: Genişlik
//height: Yükseklik
//preserveAspectRatio: En boy oranını koru
//preventEnlarge: doğal boyutları aşmasını önle

Resize methodu ile resmimizi tekrar boyutlandırabiliriz.

  image.AddTextWatermark(
                text: "CopyRight", // Yazı
                fontColor: "Blue", // Yazı rengi
                fontSize: 90, //Yazı boyutu
                fontFamily: "Arial",// Yazı tipi
                fontStyle: "Underline", //Yazı stili - "Regular", "Bold", "Italic", "Underline", and "Strikeout"
                horizontalAlign: "Left", // Yatay konum 
                verticalAlign: "Middle", //Dikey
                opacity: 65, //Görünürlük
                padding: 165); // Kenar boşluğu

AddTextWatermark ile resmimize fligran ekleyebiliriz. Yukarıdaki kod bloğunda aldığı parametreleri sıraladım.

 image.AddImageWatermark(Server.MapPath("/Upload/maxresdefault.jpg"));

AddImageWatermark ile resmimizin üzerine resim olarak fligran ekleyebiliriz.

Not : AddImageWatermark methodu AddTextWatermark methodunun aldığı parametreleri alabilir. Text parametresi yerine resmin konumunu  verebilir veya WebImage nesnesi verebiliriz.

AddImageWaterMark methodumuzun 2 adet overload'ı bulunmaktadır. İlkini yukarıda inceledik ikincisini de kısaca özetleyelim.

 WebImage watermark = WebImage.GetImageFromRequest("PostedWatermark");
 watermark.Save(Server.MapPath("/Upload/w.png"));

 image.AddImageWatermark(watermark);

Yukarıdaki kod bloğunu inceleyelim arkadaşlar.

Burda dikkat etmeniz gereken husus fligran resmimizi asıl resmimizden önce yüklemektir aksi halde fligran işlemi başarısız olacaktır.

Bu arada Save ile kaydetmeyide yukarıdakı kod bloğunda görmüş olduk.

Evet arkadaşlar kısaca sınıfımızı tanıttık şimdi sıra geldi bu özellikleri kullanabileceğimiz örneğimizi yapmaya.

Hemen bir Action oluşturalım ve koyulalım.

        public ActionResult Index()
        {
            return View();
        }

Oluşturduğumuz action'a Add View diyelim ve kendimize bir form oluşturalım.

Tabi formumuzun içinde file tipinde bir input ve submit buton ekleyelim.

@using (Html.BeginForm("index", "demo", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    @Html.TextBox("PostedImage", null, 
    new { @type = "file", @required = "", @accept = "image/gif, image/jpeg, image/png" })
    
    <input type="submit" value="Submit" />
}

Sıra geldi post işleminden sonra uygulanacak işlemlere.

        [HttpPost]
        public ActionResult Index(FormCollection collect)
        {
            //Post edilen resmi al
            WebImage image = WebImage.GetImageFromRequest("PostedImage");


            //Resmin orjinalini yeni nesnemize aktardık
            var orjinal = image.Clone();

            //Orjinal resmi kaydedeceğimiz alan
            var orjinalSavePath = Server.MapPath("/Orjinal/orjinal.jpg");

            //orjinal resmi kaydet
            orjinal.Save(orjinalSavePath);

            //Küçük resim için bir kopya daha aldık
            var thumb = image.Clone();

            //Küçük resmi kaydedeceğimiz alan
            var thumbSavePath = Server.MapPath("/Thumb/thumb.jpg");

            //Sağdan ve soldan 50'şer pixel kırptık
            thumb.Crop(left: 50, right: 50);

            //Küçük resmimizi genişliğini ve yüksekliğini 100 pixel olarak ayarladık
            thumb.Resize(100, 100);

            //Küçük resmi kaydettik
            thumb.Save(thumbSavePath);


            //resmi sola çevirdik
            image.RotateLeft();

            //Fligranlı resmi kaydedeceğimiz alan
            var WaterMarkSavePath = Server.MapPath("/Upload/fligran.jpg");


            //Fligran ekledik
            image.AddTextWatermark(
                text: "CopyRight", // Yazı
                fontColor: "Blue", // Yazı rengi
                fontSize: 90, //Yazı boyutu
                fontFamily: "Arial",// Yazı tipi
                fontStyle: "Underline", //Yazı stili - "Regular", "Bold", "Italic", "Underline", and "Strikeout"
                horizontalAlign: "Left", // Yatay konum 
                verticalAlign: "Middle", //Dikey
                opacity: 65, //Görünürlük
                padding: 5); // Kenar boşluğu



            // Resmimizi kaydettik
            image.Save(WaterMarkSavePath);


            return View();
        }

Evet arkadaşlar mişyın kopmpleytıt yes

Bide View tarafında yüklenenleri görmek amacıyla bi kaç rütuş yapalım. Aşağdaki kod bloğunun tek amacı yüklenen resimleri göstermektir WebImage sınıfı ile bir ilgisi yoktur.

   @{
            <h1>Fligranlı resim</h1>

            var fligranpahts = Directory.GetFiles(Server.MapPath(@"/Upload"));
            foreach (var item in fligranpahts)
            {
                if (item != null)
                {
                    var resim = item.Split('\\').Last();
                    <img style="max-width:200px" src="/Upload/@resim" alt="Alternate Text" />
                }
            }


            <h1>Orjinal Resim</h1>

            var Orjinalpahts = Directory.GetFiles(Server.MapPath(@"/Orjinal"));
            foreach (var item in Orjinalpahts)
            {
                if (item != null)
                {
                    var resim = item.Split('\\').Last();
                    <img style="max-width:200px" src="/Orjinal/@resim" alt="Alternate Text" />
                }
            }


            <h1>Küçük Resim</h1>

            var Thumbpahts = Directory.GetFiles(Server.MapPath(@"/Thumb"));
            foreach (var item in Thumbpahts)
            {
                if (item != null)
                {
                    var resim = item.Split('\\').Last();
                    <img style="max-width:200px" src="/Thumb/@resim" alt="Alternate Text" />
                }
            }

        }

Ekran çıktımız.

web image ekran çıktısı

 

Arkadaşlar umarım sizler için faydalı bir paylaşım olmuştur.

Saygılarımla Fatih BÜLBÜL

Facebook Üzerinden Yorumlar