Checking Image Dimensions Client-Side

Question

I have a website where users are supposed to upload images. I am trying to figure out the best way to set a max width/height of these images, and make the check before they get uploaded.

I know sites like bandcamp have this functionality, and it seems like they are doing this client-side in javascript, but as I read all of the similar questions on the web, it sounds like it is not possible. So here are my questions.

1. If it is possible to do this in javascript, can someone explain how or show me an open-source example

2. If it is not, then are either of these two solutions accepted.

a. The image gets uploaded from the browser to the server. Once it is successfully copied to the server, you can use a third-party python lib like PIL (I am using Django) to check the dimensions, and then return a ajax true/false if it was valid

b.Uploaded the image and insert it into the DOM but make it hidden, and then use

document.getElementByID('#image_id").height + width to see the size. If the size is valid, then display:block or whatever.

both a and b have negatives, so if there is a better solution, let me know

Thanks

Answer 1

Why don't you simple accept all sizes, and check the size with PHP?

fe with getimagesize() and reduce the size with imagecopyresampled() like it is shown in the example: http://www.php.net/manual/en/function.imagecopyresampled.php

If you want to resize on client side you can't do that without a plugin as Mike said.

Btw: A size limit is not smart as much of the visitors aren't able to resize images.