How to check Dimension of a Image in Javascript

Question

5.00/5 (1 vote)

See more:

Respected Professionals

Hope you all are fine. I want to implement a javascript module where i can check dimensions of an image file,
The image file is selected from client side by FileUpload Control of asp.net.

The source code is

.aspx portion

<asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode ="Static" />

.aspx.cs portion

C#

if (!IsPostBack)
        {
            FileUpload1.Attributes.Add("onchange", "CheckFileDimension();");

        }

Javascript portion is

JavaScript

<script type="text/javascript">
        function CheckFileDimension() {
            var Uploader = document.getElementById("FileUpload1");
            var uploadedImage=Uploader.value;
            alert(uploadedImage); // This only shows the image file name not the //full path, I want to get the full path of the image and get the  dimension of //the image
        
         
            
        }
    </script>

If it is possible in javascript then guide me in this regard. if not how to check in C# at server side, with out effecting the input stream before saving that image. if the image is of the exact dimension then i will save the file to the server otherwise i will ask the user for exact dimensions.

Posted 5-Oct-11 23:06pm

TanzeelurRehman

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Al Moje · Accepted Answer · 2011-10-06T00:12:00

Hi,

Try this...

bool withImage = true;
Byte[] imgByte = null;
var img = FileUpload1;
if  (img != null)
{
   if (img.HasFile && img.PostedFile != null)
   {
       withImage = true;
       //To create a PostedFile
       HttpPostedFile File = img.PostedFile;
       //Create byte Array with file len
       imgByte = new Byte[File.ContentLength];
       //Force the control to load data in array
       File.InputStream.Read(imgByte, 0, File.ContentLength);
       originalSize = File.ContentLength;

       System.Drawing.Image oldImage = System.Drawing.Image.FromStream(new MemoryStream(imgByte)

       // Here you get the Height and the Width of original image
       var imgHeight = oldSize.Height;
       var imgWidth =  oldSize.Width
    }
}
else
{
   withImage = false;
}

Hope this could help...

Regards,
Algem

Al Moje · Accepted Answer · 2011-10-06T19:40:00

Hi,

This is a only a sample how to resize image:

private static byte[] ResizeImageFile(byte[] imageFile, Size targetSize)
        {
            using (System.Drawing.Image oldImage = System.Drawing.Image.FromStream(new MemoryStream(imageFile)))
            {
                Size newSize = CalculateDimensions(oldImage.Size, targetSize.Height, targetSize.Width);
                using (Bitmap newImage = new Bitmap(newSize.Width, newSize.Height, PixelFormat.Format24bppRgb))
                {
                    using (Graphics canvas = Graphics.FromImage(newImage))
                    {
                        canvas.SmoothingMode = SmoothingMode.AntiAlias;
                        canvas.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        canvas.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        canvas.DrawImage(oldImage, new Rectangle(new Point(0, 0), newSize));
                        MemoryStream m = new MemoryStream();
                        newImage.Save(m, ImageFormat.Jpeg);
                        return m.GetBuffer();
                    }
                }
            }
        }

        private static Size CalculateDimensions(Size oldSize, int targetH, int targetW)
        {
            Size newSize = new Size();
            if (oldSize.Height > oldSize.Width)
            {
                newSize.Width = targetW;
                newSize.Height = targetH;
            }
            else
            {
                //Make the image as uniform with fix size.
                newSize.Width = targetW;
                newSize.Height = targetH;
            }
            return newSize;
        }

Hope this could help...

Regards,
Algem

How to check Dimension of a Image in Javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0