Merhaba arkadaşlar bu makalemizde başlığındanda anlaşılacağı gibi sizlere elimden geldiğince WebImage sınıfını tanıtacağım
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.
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
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.
Arkadaşlar umarım sizler için faydalı bir paylaşım olmuştur.
Saygılarımla Fatih BÜLBÜL
Facebook Üzerinden Yorumlar