Question: My fren wants me to develop a website for him for a face-cake bakery. I am supposed to supply a form for users so that they can order cakes and submit the photo to be printed on the cake.Now I need to make a dynamic imaging system that shows the preview of how the cake would look with the image user submitted.. it would be very helpful if you could suggest some libraries to do so.

Answer: 
It sounds like you're trying to do two things:

1. Display a user-selected photo on the client side (before it goes to the server).
2. Transform that image so it appears in the correct position on a cake.

Both of these functions traditionally fall in the domain of backend processing, but thanks to the HTML5 and CSS3 draft standards, they are available in at least Chrome and Firefox. The below solutions aren't universal and you **will** have to fall back to a server based solution for non-supporting browsers, but it's worth mentioning:

**Displaying a user-selected image**

When a user selects a file from `<input type=file>`, it dispatches a `change` event. When this occurs, the DOM object has a `FileList` property called `files` allowing you to read the contents of these files. `URL.createObjectURL` lets you convert the file into a URL you can use for an image source:

```
input.addEventListener('change', function () {
    preview.src = URL.createObjectURL(this.files[0]);
});

preview.addEventListener('load', function () {
    URL.revokeObjectURL(this.src);
});

```

See <http://jsfiddle.net/bnickel/yP7Bb/> for a demo.

**Transforming to look like a cake top**

CSS3 3d transforms make it possible to transform a surface to look 3D. I've experimented and found the following very convincing. The 0.7 compresses it vertically and the -0.008 is a rotation to add perspective.

```
-webkit-transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

```

You can play with values here: <http://jsfiddle.net/bnickel/v9Jat/>
you can use absolute positioning and 3d transform css, border radius circles with overfow hidden with background none and the image as child element with round cakes.

Thats about it.