0

I have an input text field where the user provides the source url of the image , for example http://mysite/images/STARTPAGE_LOGO.gif is a valid value.

I dont have any img tag or something else in my html document. How can i determine the dimensions of the image which is present at the URL the user has entered .

ShrekOverflow
  • 6,795
  • 3
  • 37
  • 48
Anton Sementsov
  • 1,196
  • 6
  • 18
  • 34
  • the `size` means the size in bytes or the image attributes like width and height? – Alfred Aug 13 '12 at 13:05
  • You would have to load it dynamically. The answer here describes how: http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript – Yusuf X Aug 13 '12 at 13:07

2 Answers2

12

There is no method to find out the width and height of the image without loading it so you will have to dynamically load it , and to do so you can use 

function getDimensions(_src,_callback){
     /* create a new image , not linked anywhere in document */
     var img = document.createElement('img');
     /* set the source of the image to what u want */
     img.src=_src;
     /* Wait the image to load and when its so call the callback function */
     /* If you want the actual natural dimensions of the image use naturalWidth and natural height instead */
     img.onload = function () { _callback(img.width,img.height) };
}

After declaring the above function in pure javascript spirit you can do something like

getDimensions('http://mysite/images/STARTPAGE_LOGO.gif',function(w,h){
 console.log( "Height : ",h,"Width:",w);
});
ShrekOverflow
  • 6,795
  • 3
  • 37
  • 48
-3

HTML:

   <input id="src" type="text" value="https://www.google.pl/images/srpr/logo3w.png"/>

JAVASCRIPT:

var img = new Image; // create tmp image element  
                     // is equal to document.createElement('img');

Bind function on onload event, it will be called automatically when image is loaded.

   img.onload = function(){
     alert( this.width +" : " + this.height );
   };

Set the source of image;

img.src = document.getElementById('src').value // get the value of input element;

for curiosity in jQuery:

$('<img/>').attr('src',$('#src').val()).bind('load',function(){
     alert( this.width +' x ' + this.height );
});
abuduba
  • 4,986
  • 7
  • 26
  • 43
  • jQuery for such simple stuff is an overkill – ShrekOverflow Aug 13 '12 at 13:11
  • man i have not any `img` tags in my html thats why i cant use such selector, may be i should generate them dynamically, create hidden `img` tag, and give him `attr.scr` of my value and then use `.width` `.height` ? What you thinking about that? – Anton Sementsov Aug 13 '12 at 13:12
  • Moreover as per new API it is .on instead of .bind – ShrekOverflow Aug 13 '12 at 13:13
  • $(''); create new HTMLImageElement – abuduba Aug 13 '12 at 13:13
  • https://gist.github.com/1417030 That answers you probably.. But other then that loading a library as huge as jQuery just to save like 10 keystrokes without understanding of proper DOM is a really really BAD IDEA – ShrekOverflow Aug 13 '12 at 13:16
  • 3
    @abuduba your code is completely unintelligible, that's usually the problem with jQuery and the way you wrote it is not teaching anything to the OP, as he needs to understand how Javascript and the browser work, not a spoon-fed one-liner recipe that doesn't explain anything. – gonchuki Aug 13 '12 at 13:18