Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Program for Optimization and Resizing of an Image

, 31 Mar 2010 CPOL
This article guides about optimization of the size of an image file (in bytes) and resizing its dimensions (in pixels).
ImageOptimizationnResize.zip
ImageOptimizationnResize
Original Images
readme.docx
Resultant Images
Snapshot.jpg
<%@ 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)

Share

About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies, WebStreet.in
India India

Software professional with demonstrated strength in windows-based and web-based software development. Have 4 years of experience with the full software development lifecycle including requirements, design, development, testing/QA, deployment, training & support. Have 1 year experience managing groups, planning and executing implementations. Practical working knowledge of all aspects of IT. Possess strong insight into practical business considerations.



www.cherisys.com
www.webstreet.in
www.codevdo.com
www.bizkut.com
Follow on   Twitter

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 31 Mar 2010
Article Copyright 2010 by Mohd Arshad (Sam)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid