Tuesday, July 15, 2014

Resize Image in C#

Step 1: Create a web page 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div img { float: left; margin-bottom: 10px; }
        div span { float: left; font-size: 11px; font-family: Arial; padding-bottom: 20px; }
        .dv8 { float: left; width: 10px; padding: 20px; }
        .dv16 { float: left; width: 20px; padding: 20px; }
        .dv24 { float: left; width: 30px; padding: 20px; }
        .dv32 { float: left; width: 40px; padding: 20px; }
        .orig { border: 1px solid lightgray; padding: 2px; }
       
        .dvpart1 { float: left; padding-right: 50px; }
        .dvpart2 { float: left; }
        .dvpart2 .btn { float: left; font-size: 11px; font-family: Arial; }
        .clear { clear: both; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="dvpart1">
        <div class="dv8">
            <span>8*8</span>
            <asp:Image CssClass="orig" runat="server" ID="img8to8" />
            <asp:Image runat="server" ID="img16to8" />
            <asp:Image runat="server" ID="img24to8" />
            <asp:Image runat="server" ID="img32to8" />
        </div>
        <div class="dv16">
            <span>16*16</span>
            <asp:Image runat="server" ID="img8to16" />
            <asp:Image CssClass="orig" runat="server" ID="img16to16" />
            <asp:Image runat="server" ID="img24to16" />
            <asp:Image runat="server" ID="img32to16" />
        </div>
        <div class="dv24">
            <span>24*24</span>
            <asp:Image runat="server" ID="img8to24" />
            <asp:Image runat="server" ID="img16to24" />
            <asp:Image CssClass="orig" runat="server" ID="img24to24" />
            <asp:Image runat="server" ID="img32to24" />
        </div>
        <div class="dv32">
            <span>32*32</span>
            <asp:Image runat="server" ID="img8to32" />
            <asp:Image runat="server" ID="img16to32" />
            <asp:Image runat="server" ID="img24to32" />
            <asp:Image CssClass="orig" runat="server" ID="img32to32" />
        </div>
    </div>
    <div class="clear"></div>
    <div class="dvpart2">
        <div>
            <asp:Button CssClass="btn" Text="Upload and resize" runat="server" ID="btnResize" OnClick="btnResize_Click" />
            <asp:FileUpload CssClass="btn" runat="server" ID="updImage" />
        </div>
         <div class="clear"></div>
        <div class="dv8">
            <span>8*8</span>
            <asp:Image runat="server" ID="imgCustomTo8" />
        </div>
        <div class="dv16">
            <span>16*16</span>
            <asp:Image runat="server" ID="imgCustomTo16" />
        </div>
        <div class="dv24">
            <span>24*24</span>
            <asp:Image runat="server" ID="imgCustomTo24" />
        </div>
        <div class="dv32">
            <span>32*32</span>
            <asp:Image  runat="server" ID="imgCustomTo32" />
        </div>
    </div>
    </form>
</body>
</html>



Step 2: paste blow code in code behind 


/// <summary>
    /// Creates the thumbnail.
    /// </summary>
    /// <param name="maxWidth">The maximum width.</param>
    /// <param name="maxHeight">The maximum height.</param>
    /// <param name="path">The path.</param>
    /// <returns>The path of new resized image</returns>
    public string CreateThumbnail(int maxWidth, int maxHeight, string path)
    {

        var image = System.Drawing.Image.FromFile(path);
        var ratioX = (double)maxWidth / image.Width;
        var ratioY = (double)maxHeight / image.Height;
        var ratio = Math.Min(ratioX, ratioY);
        var newWidth = (int)(image.Width * ratio);
        var newHeight = (int)(image.Height * ratio);
        var newImage = new Bitmap(newWidth, newHeight);
        Graphics thumbGraph = Graphics.FromImage(newImage);

        thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
        thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
        //thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;

        thumbGraph.DrawImage(image, 0, 0, newWidth, newHeight);
        image.Dispose();

        string fileRelativePath = "newsizeimages/" + maxWidth + Path.GetFileName(path);
        newImage.Save(Server.MapPath(fileRelativePath), newImage.RawFormat);
        return fileRelativePath;
    }

    /// <summary>
    /// Handles the Click event of the btnResize control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
    protected void btnResize_Click(object sender, EventArgs e)
    {
        if (updImage.HasFile)
        {
            try
            {
                updImage.SaveAs(Server.MapPath("uploadedimage/" + updImage.FileName));
                imgCustomTo8.ImageUrl = CreateThumbnail(8, 8, Server.MapPath("uploadedimage/" + updImage.FileName));
                imgCustomTo16.ImageUrl = CreateThumbnail(16, 16, Server.MapPath("uploadedimage/" + updImage.FileName));
                imgCustomTo24.ImageUrl = CreateThumbnail(24, 24, Server.MapPath("uploadedimage/" + updImage.FileName));
                imgCustomTo32.ImageUrl = CreateThumbnail(32, 32, Server.MapPath("uploadedimage/" + updImage.FileName));
            }
            catch
            {

            }
        }
    }



3. Use blow namespace

using System.Drawing;
using System.IO;
using System.Drawing.Drawing2D;


No comments :

Post a Comment