Remote image properties using jquery

Question

I'm currently trying to get the image width / height removed. I am developing a link exchange module, for example, when you insert a link to facebook, you can see the name, description and images.

So, I tried using php getimagesize to get the width / height of the image very slowly.

So, I'm thinking of using a jquery solution to get the remote image width / height so that I can filter the image width below 100 pixels.

I am new to jquery / javascript

I tried something like

var img = $('#imageID'); var width = img.clientWidth; var height = img.clientHeight; $('#info').html(width+'.. height: '+height); 

It does not work and returns undefined .. height: undefined

Any help is appreciated.

thanks

Answer 1

Try the following:

 var img = new Image(); img.src = 'http://your.url.here/image.png'; img.onload = function() { $('#info').text('height: ' + img.height + ' width: ' + img.width); }; 

This approach allows you to get image information without having to have an <img> . Now, perhaps you want the image to be on the page, so you would do what @patrick offers in this case.

Answer 2

If you are trying to get the width and height of the image on the client side, you can use jQuery .width() and .height() .

Example: http://jsfiddle.net/aeBWQ/

 $(window).load(function() { var img = $('#imageID'); var width = img.width(); var height = img.height(); $('#info').html(width+'.. height: '+height); }); 

Doing $(window).load() ensures that the images are loaded before getting the height / width.