Question

I have an app where I want users to be able to upload a photo for their profile. The photo will be quite big on their profile page – 640x360px which translates to 16:9 ratio which seems to be the standard image size from a digital camera.

I haven’t done this before (bit of a noob) and there’s a couple of things I don’t know whats the best way to handle.

So I want an ‘upload image’ button which causes a popup which allows the user to resize or crop the image they’re uploading so if fits nicely into a 640x360px div. But if the image they’re uploading is, for example, 16:16 ratio and 5000px wide, then obviously it needs to be resized before being shown to the user where he can then crop the image to fit into my required 16:9 ratio.

Equally if the image the user wants to use it tiny I want to encourage them to scale their picture up so if fits nicely into the div I want it in.

I guess this is a common problem and I’m hoping there’s a plugin but after sifting for an hour or so through the endless plugins on jQuery’s plugin website I couldn’t spot one which actually does the above.

I’m looking for some recommendations from some smart people 🙂

thanks

Answer 1

Its not really a common problem, and file upload is actually fairly difficult. The problem is that you are very restricted because of security concerns.

What you could do is just do a normal file upload (there are plenty of tutorials online if you need help with that), and then use ImageMagick to resize the images to the resolution you want serverside.