Add library to crop profile images when uploaded

[JohnONolan]

Profile images need to be square for consistency in output. In order to achieve this we should do what pretty much every site does - and provide a small crop tool after the image has uploaded. See Gravatar or Twitter if you want an example.

I believe there's a common JS library for this?

[felixrieseberg]

JCrop (demo) seems to be the default jQuery plugin, but I really like DarkroomJS (demo). Darkroom uses canvas, "feels" better and doesn't require jQuery.

updated by novaugust to add demo links

[ErisDS]

I agree that DarkroomJS looks really nice, but it doesn't seem to be actively developed and investigation shows that it has a fundamental bug that means it wouldn't work for us.

JCrop on the other hand is, as @felixrieseberg said, pretty much the default go-to solution. So I'd recommend going down that route.

The underlying challenge here is that these plugins don't actually do the crop - they just provide an interface. Therefore we end up back at the same place we are with all the other image resizing / rotating issues - that we haven't yet found a good way to do this with node.

That being said, the web APIs are getting smarter and smarter and there are hundreds of new node modules every day (which if they're pure JS can be executed client-side) so I'm sure that a bit of research would turn up a potential solution here.

I think it might make sense to close the existing issues and reopen a new one where we can fully define all the image processing images that we have and what the constraints are so that we can start collecting and discussion solutions which will unblock all of these features.

[ErisDS]

I'm going to close this issue against #4453, which has been raised as the 'one true place' to have a big discussion about all our image processing needs in Ghost. Once we've got a clear idea of a potential solution we'll come back to these individual problems and resolve them.