Friday 4 April 2014

How to Reduce Image FileSize without loosing Image quality in asp.net.



Description:-

Here in this example we explain that how to resize an image without losing any quality from uploaded images using asp.net.

Resizing your images in asp.net seems to be a problem for many. Getting the image to resize is no problem at all. Getting the resized image to keep the same quality is where the problem lies.

Generally, In social networking sites like in Facebook after upload images they will reduce the size of the images but the quality will be same after seen that I tried to write this post.

I'm going to show you how to resize an image inputted by a user that you can resize to 3 different sizes. In this article we'll resize an image to a full size (600px wide), a medium size (200px wide) and a thumbnail (100px wide). You can also easily change any of these values to match your specific needs.

You can resize the image before saving it , if you are using the fileupload then this code will help you to resize the image with no effect on the picture quality and you can save it in any format such as .png ,.jpeg, .bmp and .gif etc


to show Example of How to Display Gridview Row Detail in Javascript Popup click here Display Gridview ARow Detail in Javascript Popup

to show Example of how to Redirect to another aspx page in javascript click here Redirect to another aspx page in javascript



reduceimagesize.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="reduceimagesize.aspx.cs" Inherits="reduceimagesize" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Reduce Image FileSize without loosing Image quality </title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="fileupload1" runat="server" />
            <asp:Button ID="btnupload" runat="server" Text="UploadImage" OnClick="btnupload_Click" />
        </div>
        <div>
            <asp:DataList ID="datalst1" runat="server" RepeatColumns="4" CellPadding="7">
                <ItemTemplate>
                    <asp:Image ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" Width="50" Height="50" />
                    <br />
                    <asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" />
                </ItemTemplate>
                <ItemStyle BorderColor="Tomato" BorderStyle="dotted" BorderWidth="4px" HorizontalAlign="Center"
                    VerticalAlign="Bottom" />
            </asp:DataList>
        </div>
    </form>
</body>
</html>



reduceimagesize.aspx.cs:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;

public partial class reduceimagesize : System.Web.UI.Page
{



    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindImagestoDataList();
        }
    }
    protected void BindImagestoDataList()
    {
        DirectoryInfo dir = new DirectoryInfo(MapPath("Images"));
        FileInfo[] files = dir.GetFiles();
        ArrayList listItems = new ArrayList();
        foreach (FileInfo info in files)
        {
            listItems.Add(info);
        }
        datalst1.DataSource = listItems;
        datalst1.DataBind();
    }
    protected void btnupload_Click(object sender, EventArgs e)
    {
        string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
        string targetPath = Server.MapPath("Images/" + filename);
        Stream strm = fileupload1.PostedFile.InputStream;
        var targetFile = targetPath;
        GenerateThumbnailsofImage(0.5, strm, targetFile);
        BindImagestoDataList();
    }
    private void GenerateThumbnailsofImage(double scaleFactor, Stream sourcePath, string detinationPath)
    {
        using (var image = System.Drawing.Image.FromStream(sourcePath))
        {
            var newWidth = (int)(image.Width * scaleFactor);
            var newHeight = (int)(image.Height * scaleFactor);
            var thumbnailImg = new Bitmap(newWidth, newHeight);
            var thumbGraph = Graphics.FromImage(thumbnailImg);
            thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
            thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
            thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;
            var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
            thumbGraph.DrawImage(image, imageRectangle);
            thumbnailImg.Save(detinationPath, image.RawFormat);
        }
    }
}

3 comments:

  1. Awesome article based on Image Size..It really matter a lot while we want to add big image...

    ReplyDelete
  2. Amazing Post..........

    ReplyDelete