I looked into a number of plugins with compatible licenses that could be used to crop the wallpaper. Using already maintained plugin will save us the effort to optimise for multiple browsers, as cropping high resolution wallpaper on client-side may impact browser performance.
Plugins like cropbox.js, jquery.viewport-crop.js, jquery-cropbox, guillotine & cropit crop image in place. Moreover guilotine & cropit require coffeescript. Jcrop doesn’t allow to create multiple cropping windows. All in all these plugins are generic & support cropping of the image into just single cropped image. Some like guilotine & picEdit also have unnecessary image editing options.
So for our specialised application I’m working on a tailor-made image cropping widget. In this widget, wallpaper will be drawn on the HTML5
canvas. Multiple cropping windows could be created on-the-fly as draggable
divs. The parts marked by these
divs will then be extracted as data URIs. Most browsers have good support for these methods.
Now, the plugins used for downloading cropped images, like picEdit, cropimg, Image Cropper, croppic, Picture Cut & imgAreaSelect, handle actual cropping on server-side. Moreover the plugins that crop the image on client-side does so to avoid uploading high resolution images. So to reduces the bandwidth requirement & browser performance impact, if we choose to crop on server-side, then Nuancier needs to generate the wallpapers in medium resolution such that they can be downloaded for marking the parts to be cropped in browser. Moreover as users can on-demand crop any wallpaper as per their multi-monitor setups, scheduling these cropping jobs also needs to be considered.