Question

Alright so here it goes, I have my user system working perfectly, and now in the edit profile, I’m trying to add a change avatar URL option.

At the moment it’s working great, but for pageloads time and such, I’m looking to restrain the normal users to a maximum of 300px images width, and let’s say around 500px height, that are then resized in

So basically, I just want a javascript function to verify the URL of an image (entered in a textbox) and if it is over the size I want, well the user gets an alert saying remote image too big & the process ends there.

I tried several ways, but I never got to my goal, so any help would be greatly appreciated!

tl;dr : User input image in text box > click submit button > if image is over size i definite > alert & end process

Thank you!

Answer 1

Just create a new Image object with that url and check its width and height attributes after the onload event.

var img = new Image();
img.onload = function(){
   alert(img.width);
};
img.src = "http://example.com/avatar.png";

​

There is no need for server-side with this, but you should note that users are able to override this since it’s done solely on the browser.