Use face from an image for postcard (see screenshot)

Question

Hi,

I am looking to build an app similar to santayourself (facebook application) a screenshot below

The application will accept a photo and then the users can move it with controls for zoom and rotate and moving image right, left, up and down. Then once the face is as required then the user can click save to save the image on the server (php, apache, linux).

Any recommendations on how to go about this project? I guess a javascript solution will be better. Any suggestions welcome.

Answer 1

yep. javascript is the way to go about interactive things like this. I can see this easily being done with a simple script and some PNGs (though you might have to do something creative for the rotation). PHP would only be needed for saving.

EDIT: Actually, now that I think of it, a HTML 5 canvas approach would be best. It's got lots of transformation and pixel-manipulation methods, and can even save the image client-side! Remember, though that HTML 5 is not supported in all browsers (basically everything except IE). (HTML 5 Canvas Spec)

The drawImage method is what you're looking for: (I quote from spec)

void drawImage(in HTMLImageElement image, in float dx, in float dy, in optional float dw, in float dh);

So, your HTML would have a canvas element that draws the user's picture:

<canvas id="canvasElement" width="xx px" height="xx px">
<!-- What to display in browsers that don't support canvas -->
<p>Your browser doesn't support canvas</p>
</canvas>

Then, your javascript:

var view;
var context;

var userPhoto=new Image;
userPhoto.src="uploaded.jpg";

// Update these with UI settings
var position = {x:x, y:y};
var scale;
var rotation;

function init() {
    // Run this once at the loading of your page

    view = document.getElementById("canvasElement");
    context = view.getContext("2d");
}

function update() {
    // Run this every time you want the picture size, position, rotation updated

    context.clearRect(0, 0, view.width, view.height);

    // Scale X and Y
    context.scale( scale, scale );
    // Rotate (convert degrees to radians)
    context.rotate( rotation / 3.14159 * 180 )

    // Draw the image at X and Y
    context.drawImage( userPhoto, position.x, position.y )
}

HTML 5 Canvas is very powerful, so there's tons of other things you can do to your image if you go this direction. However, another viable solution would be to use flash, which is supported everywhere — but I recommend HTML 5 as it is the way of the future (Steve Jobs: Thoughts on Flash).

Answer 2

javascript AND php GD-library would do it - most of the things described above can be done w javascript alone. The fastest way to do this would be to have the santa mask done w a transparent png absolutely placed over a simalarly placed client photo that is however placed in a div the same size as the mask with overflow set to hidden. Since the client phot is absolute within the div it can be moved around and its size can be manipulated by the user through some mechanism as shown above. However - rotation will be a bitch and here you will have to use php gd-library or image majik (personally i would dump rotation). This is a simple-ish job but time consuming - the user-interface to image manipulation is tricky tho. If the output for this is for print-from-screen i would not bother w further server-side manipulation, but rather just store the image to mask positional relationship (1/2 kb) of data...

Answer 3

Have a look at the jCrop library (jQuery), you may be able to tweak it enough to do what you want to do.
http://deepliquid.com/content/Jcrop.html (they obviously supply a few demos)