Click here to Skip to main content
15,891,951 members
Articles / Web Development / ASP.NET

Program for Optimization and Resizing of an Image

Rate me:
Please Sign up or sign in to vote.
3.70/5 (17 votes)
31 Mar 2010CPOL4 min read 77.5K   2.6K   31  
This article guides about optimization of the size of an image file (in bytes) and resizing its dimensions (in pixels).
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        function chkWH(source, args)
        {
            if(chkNumeric(args.Value))
            {
                if(parseInt(args.Value)>49 && parseInt(args.Value)<1000)
                    args.IsValid = true;
                else
                    args.IsValid = false;
            }
            else
                args.IsValid = false;
        }
        
        function chkNumeric(whv)
        {
            var validchars = "0123456789";
            var isval = true;
            var vlen = whv.length;
            
            for(i=0;i<vlen;i++)
                if(validchars.indexOf(whv.charAt(i),0)<0)
                {
                    isval = false;
                    break;
                }
                
            return isval;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Browse an image of type .jpg, .gif, .png, .bmp or .tif. Must be less than or equal to 10MB in size:<br />
        <asp:FileUpload ID="fpImage" runat="server" />
        <asp:RequiredFieldValidator ID="reqImage" Display="Dynamic" ControlToValidate="fpImage" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvImageType" Display="Dynamic" ControlToValidate="fpImage" OnServerValidate="cvImageType_Validate" style="font:12px verdana;color:Red;vertical-align:middle;" Text="&nbsp;(Image must be any of these types: .jpg, .gif, .png, .bmp, .tif)" runat="server"></asp:CustomValidator>
        <asp:CustomValidator ID="cvImageSize" Display="Dynamic" ControlToValidate="fpImage" OnServerValidate="cvImageSize_Validate" style="font:12px verdana;color:Red;vertical-align:middle;" Text="&nbsp;(Image size must not exceed by 10MB.)" runat="server"></asp:CustomValidator>
        <br />
        New Width: <asp:TextBox ID="txtWidth" MaxLength="3" Width="50px" runat="server"></asp:TextBox>&nbsp;PX
        <asp:RequiredFieldValidator ID="reqTxtW" Display="Dynamic" ControlToValidate="txtWidth" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvTxtWidth" Display="Dynamic" ClientValidationFunction="chkWH" ControlToValidate="txtWidth" style="font:12px verdana;color:Red;vertical-align:middle;" Text="Width must be specified in decimals and between 50-999" runat="server"></asp:CustomValidator>
        <br />
        New Height: <asp:TextBox ID="txtHeight" MaxLength="3" Width="50px" runat="server"></asp:TextBox>&nbsp;PX
        <asp:RequiredFieldValidator ID="reqTxtH" Display="Dynamic" ControlToValidate="txtHeight" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvTxtHeight" Display="Dynamic" ClientValidationFunction="chkWH" ControlToValidate="txtHeight" style="font:12px verdana;color:Red;vertical-align:middle;" Text="Height must be specified in decimals and between 50-999" runat="server"></asp:CustomValidator>
        <br /><br />
        <asp:Button ID="btnResults" Text="Show Result" OnClick="btnResults_OnClick" runat="server" />
        <br /><br />
        <table cellpadding="0" cellspacing="0" border="0" style="width:800px">
            <tr>
                <td style="width:50%;padding-right:10px;text-align:center;">
                    <h3>Original Image</h3>
                    <asp:Image ID="imgOriginal" Width="380px" Height="380px" runat="server" />
                    <br /><br />
                    Width (in Pixels): <asp:Label ID="lblOIW" runat="server"></asp:Label><br />
                    Height (in Pixels): <asp:Label ID="lblOIH" runat="server"></asp:Label><br />
                    Size (in Bytes): <asp:Label ID="lblOIS" runat="server"></asp:Label>
                </td>
                <td style="width:50%;padding-left:10px;text-align:center;">
                    <h3>Resultant Image</h3>
                    <asp:Image ID="imgResult" Width="380px" Height="380px" runat="server" />
                    <br /><br />
                    Width (in Pixels): <asp:Label ID="lblRIW" runat="server"></asp:Label><br />
                    Height (in Pixels): <asp:Label ID="lblRIH" runat="server"></asp:Label><br />
                    Size (in Bytes): <asp:Label ID="lblRIS" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <br /><br />
                    <strong>Note:</strong> However I've set the dimensions of both (original & optimized) images as 380px width and 380px height on page. But the actual dimensions are same as mentioned alongwith each image. 
                    <br /><br />
                    <asp:HyperLink ID="lnkSave1" Text="Click here" Target="_blank" runat="server"></asp:HyperLink> to see the actual original image in new window.
                    <br /><asp:HyperLink ID="lnkSave2" Text="Click here" Target="_blank" runat="server"></asp:HyperLink> to see the actual resultant image in new window.
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Cherisys Technologies
India India
Senior Software Professional with 13+ years of experience in web/desktop applications development.

Comments and Discussions