SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FileReader API - Getting image width

    Hi,

    I have an image upload form with image preview. When a user selects an image from their desktop, the image is displayed in the preview before upload. I want to get the width of that image if possible but I don't know how to get it. I have the following code:

    HTML Code:
    function readURL(input) {
    	if (input.files && input.files[0]) {
    		var reader = new FileReader();
    		reader.onload = function (e) {
    			$('#preview').attr('src', e.target.result).css('width', ???);
    		};
    		reader.readAsDataURL(input.files[0]);
    		}
    	}
    }
    I have ??? in where I want to get the selected image width. Do you have any ideas how to do that?

    Thanks.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi nayen,

    You can do it like this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Get image width using File API</title>
      </head>
    
      <body>
        <input type='file' onchange="readURL(this);" />
          
        <script>
          function readURL(input) {
            if (input.files && input.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                var img = new Image;
                img.onload = function() {
                  console.log("The width of the image is " + img.width + "px.");
                };
                img.src = reader.result; 
              };
              reader.readAsDataURL(input.files[0]);
            }
          }
        </script>
      </body>
    </html>
    Basically you create a new image, set its src attribute to what is returned by reader.result, then use the image's onload method to access its properties.

    Hope that helps.

    BTW, this article about the File API appeared on JSPro this week. It might be worth a read.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Pullo. I took one bit from your code and adapted to mine and here is what I came up with that works just as I wanted:

    HTML Code:
    function readURL(input) {
    	if (input.files && input.files[0]) {
    		var reader = new FileReader();
    		reader.onload = function (e) {
    			var img = new Image;
    			img.onload = function() {
    				$('#preview').attr('src', e.target.result).css('max-width', img.width+'px');
    			};
    			img.src = reader.result;
    		};
    		reader.readAsDataURL(input.files[0]);
    		}
    	}
    }
    Do you think I have obsolete code in the jQuery line?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by nayen View Post
    Do you think I have obsolete code in the jQuery line?
    No, that looks fine to me.

    I was wondering why you had:

    Code JavaScript:
    if (input.files && input.files[0]) {
       ...
    }

    but I guess that's to weed out browsers that don't support the File API.

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know. It is part of a code I found somewhere else.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    I'm pretty sure that's what it's for.
    I just tried your script out on IE7 and it dies with the following error:

    Code:
    Die Eigenschaft "0" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
    Which refers to the check if input.files[0] evaluates to true.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •