Question

I ask this because I am currently trying to work out my own technique, and there are huge strategic hangups for the entire site when your begin this. Of them are:

1. Using jCrop and rMagick, it takes up a huge amount of processing ( to which I have backgrounded ).

2. Because I have it backgrounded, I must by ajax develop a feature that auto-updates every five seconds to check when the backgrounding is done.

Has anyone accomplished this with their sites? If so, what are some creative techniques you came across to keep the processing streamline, and the users happy?

Answer 1

I don’t know how facebook does it, but I would use jquery-ui’s resizeable() and draggable() methods. You could have the image set into a div the exact width of the image, and have a second draggable/resizeable div positioned on top of the image (using a higher z-index). That way, you have a semi-transparent crop area that the user can move around and adjust. You can set both methods to be constrained to the parent div, so they can’t drag or resize beyond the image.

When they are ready to crop, the coordinates of each corner can be sent via ajax to the server. The server can then run whatever image cropper you have (in php I would use gmagic -> cropimage()) and the task is done.

The tricky part is deciding how to show the user the finished product. I would definitly consider having the new cropped image stored in a tmp folder, in case they change their mind. But if you do that, you could have the ajax update the src of the image element so they can see what they’ve done. If they like it, they hit “save changes” and this sends another request via ajax to replace the original with the one in the tmp folder.

Antoher, kinda sleazy, option is to just use pxlr. They have a developer API that allows for calling their site’s tools via javascript. You can customize the features the user sees and have it save to the “reffer” meaning back to your server. Not sure how to set up security for that, but I’m sure the site goes into it.