Image upload and processing, server side or client side?

Question

My site requires squared images. At the moment I have a very basic image upload facility. Images are uploaded and the resized and squared in PHP on the server. This is causing the following problems: - It uses a lot of server resources - Images are often imperfectly squared - There is no indication of progress to the user, particularly a problem when they try to upload large images

I'm now starting to look at implanting an all new image upload page. What would you recommend, keep processing in PHP. I thought maybe i could do it client side (we use jQuery), are there any good existing libraries? Is doing this client side a good idea. What is a good PHP/javascript workflow?

Answer 1

Sticking with tried/true server side solutions, try using ImageMagick to do your resize, instead of php's built in image processing.

It works much better in our experience.

Answer 2

You could try to use a jQuery cropping plugin like JCrop which supports ratio locking to ensure squared images.

Please remember that nothing on the client side is 100% secure so any validation also has to be duplicated on the server side. This may mean checking the width/height of the image and cropping again in PHP if necessary.

Answer 3

if you are talking about changing the actual image data, you can not rely entirely on a client side solution, not all browsers will have the functionality you need. You can fall back to Flash for browsers that can't do this in js, but that starts to get gross really quick as you'll need two uploaders.

I'd recommend doing it in browsers that support it, and relying on a server side solution for those that don't. you can spread your resources out by processing them in a queue rather than immediately when uploaded if its still an issue.

Canvas is a great way to do this on modern browsers, you don't need a plugin. Look here at how to grab image data for uploading.

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

Here is a lib: http://www.nihilogic.dk/labs/canvas2image/