21 Kasım 2016 Pazartesi

MVC de Resim Ölçeklendirme

Web sitelerinde resim dosyalarının en,boy ve büyüklüklerini optimize etmek, yükleme zamanını çok azaltır. Resim yoğunluklu
sitelerde, bu azalma herşey demektir.
170 KB tutan png uzantılı bir dosya %90 küçültürek 17 KB ik bir jpeg uzantılı dosya haline getirilebilir.
Bu işlem, serverın işlemci yükünün artmasına sebeb olsada, yükleme hızını çok arttırmasınından dolayı server yükü kabul edilebir bir maliyet olarak görülür.

klasik bir html tagı olan img ye bir bakalım. Bu tagın src özelliği görüntülecek dosyanın yolunu belitir.

<img src="/Content/Image/test.png">

test.png dosyasının 170 kb uzunluğunda olduğunu varsayalım.

ilk önce route işlemimizi yapalım

routes.MapRoute("ImageResize",
     "GenelUtil/ImageResize/{width}x{height}/{imageName}",
     new { controller = "FrontPage", action = "ImageResize", keyWord = UrlParameter.Optional },
     new[] { "Genorobotic.Plugin.NewsPaper.Controllers" }
);

sonra GenelUtil isimli controler da aağıdaki actionı yaratalım
public ActionResult ImageResize(int width,int height,string imageName)
      {
          Image srcImage = null;
          string fileNotFoundPath = null;
          string imageFile = null;
          try
          {
              imageFile = Server.MapPath(""~/Content/Image/"+imageName);
              fileNotFoundPath = Server.MapPath("~/Content/Image/fileNotFound.jpg");
              srcImage = Image.FromFile(imageFile);
          }
          catch (FileNotFoundException ex)
          {
              srcImage = Image.FromFile(fileNotFoundPath);
          }
          catch (Exception ex)
          {
              return null;

          }
          using (var newImage = new Bitmap(width, height))
          using (var graphics = Graphics.FromImage(newImage))
          using (var stream = new MemoryStream())
          {
              graphics.SmoothingMode = SmoothingMode.AntiAlias;
              graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
              graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
              graphics.DrawImage(srcImage, new Rectangle(0, 0, width, height));
              newImage.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
              return File(stream.ToArray(), "image/jpeg");
          }
      }

   Server tarafında işimiz bitti. artık client tarafında

  <img src="/GenelUtil/ImageResize/300x200/test.png">        
  yazdığımızda test.png dosyasını yeni ölçeklendirip 300x200 oyutlarında,  jpeg formatında bir dosya haline getirecetir.
  170 KB dosya 10 KB civarına inecek buda yüklenme süresini çok kısaltacaktır.

Aşağıda linki verilen site bu action ı kullanmaktadır
epubevi.com

Sağlıcakla Kalın

Serdar GÜNER

Hiç yorum yok:

Yorum Gönder