1) User uploads an image to a mysql database
2) User chooses a fancy "picture frame" from a set of frame choices we give them. Openings in the frames will be transparent spaces that round, oval, rectangular, heart shaped and other shapes.
3) Image is displayed to the user to manipulate. You need to tell us how this can be be done. Ideally the image is displayed and manipulated visually on top of the selected frame with a mask over the image that is 100% transparent over the opening in the frame and 50% transparent elsewhere. The user can then clearly see what portion of their image will be displayed when the manipulation is completed. If this is not practical then a separate (real-time?) preview is necessary.
4) User dynamically manipulates - moves and scales - image so the key part of the image is properly positioned and sided in the frame. Usually this is a face that is sized to the opening,
5) Final image is generated from the picture and frame combined. Only the portion of the image in the opening will be combined with the frame
6) User is prompted for first name, age, city, state/provence and country, as well as permission to use the image. Final image and responses are stored into another field in the database and made available for the user to download, upload to Facebook, share, etc.
7) In addition, a rectangular thumbnail and a final size image of the focus area (regardless of the shape of the opening, a standard sized rectangle will be used - its location and size will be part of the frame specification) to crop then save this image into another field in the the database for other uses.
Must run on laptop/desktop browser and on mobile devices (no FLASH). If mobile devices are a problem in terms of time or cost please identify this up front.
Target budget $150, would like to be completed in 4 days, by Sunday the 24th. A rough demo of the basic image functionality without the database connectivity on Friday the 22nd would be ideal.
I'm not an advanced programmer ... but I have found some libraries that can handle much of this ... perhaps GD in PHP?
See a conceptual example here: [url removed, login to view] Their process is a bit clumsy. Don't like the double click to put picture behind frame and default scaling should be proportional. The 3 step are good, but prefer a final 4th step to confirm as part of the saving. Will prompt for several text fields during that final confirm.
It appears that my target bid may be optimistic ... please quote your best price for a non-flash (iOS friendly) solution.
I've added a screen shot of the inspiration for this project http://globalgenes.org/careaboutrare/
I've also added several sample frames showing the transparent area, and the area of the user photo we want to save in step 7. Note that viewable area of photo can come from any part of the photo, and that the photo can be scaled so the desired portion of the photo fills the transparent hole.