Creating a facebook profile pic editor web app

Cookiepus

Hi everyone
Ive been asked to create something like this (link below) for our local GAA team
users upload their facebook profile pic
they can change the colour add a little crest on the bottom
then download the new pic for their facebook.
Ive been looking at the sorce code to find some clues about a plugin.
but ive drawn a blank.
and advice help much appreciated.
Thanks
Cookie
http://support.irishrugby.ie/

Buford T Justice

Looks like they're using their own js lib for it
http://support.irishrugby.ie/assets/js/script.js

Cookiepus

Thanks Buford
looks like its beyond my web design skills
cookie

Talisman

You should be aware that FaceBook frowns upon the hijacking of profile images for marketing purposes. It used to be okay to automate the whole thing but they changed the rules a few years ago so that the user has to physically change the image themselves.

Are you looking for a complete solution or do you want to roll your own?

Through the wonder of JavaScript the necessary work can be done on the client side as the IRFU app is doing. It uses the Fabric.js library and overlays the uploaded image. There's nothing preventing you from ripping off the code from the site, you'd just need to change the styling and the images.

If you want to create a more robust server side solution you could build it around Thombor which is an open-source image cropping library that has an intelligent face detection algorithm built-in.

Cookiepus

Thanks Talisman
you've given me a lot to get my head around.
im not really botherd about facebook frowning.
i know enough about building website to know when im out of my depth (java)
ill look into Thombor- but dont think ill be able for this

Talisman

Facebook are a bit militant - 'frowns upon' was definitely understating it. I haven't checked recently but when they changed the rules, the penalty for ignoring them was the deletion of the offending Fan page and the suspension of the developer's account.

So long as you only give the user an image which they can upload themselves you'll be fine.

Cookiepus

Yes thats how it works
the user uploads his pic to the webapp page
it gets edited
they then downlaod it and re-upload to facebook themselves
Thank you!

Nugget89

Sorry to drag up an old topic, but did you get this working? Might give it a go myself.

Cookiepus

Hi Nugget
No i didnt
im more of a designer - javascript was mentioned
im oFF!

Nugget89

Fair enough! I might have a crack at it if I get some free time.

devildriver

As Buford said it looks like a custom js / Canvas function.

Cloudinary can handle it all for you using url parameters. You will need to shell out some cash though if you have a large amount of users.

http://cloudinary.com/documentation/image_transformations#image_and_text_overlays