Ma shuwen

Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let's start a quick tour.

Suppose we have a picture like this (randomly grabbed from Flickr):

First, let's reisize it:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. document.body.appendChild(l_oPhoto.fetch());

Pretty nifty eh? Note that the resizing is done serverside because usage of GD. Ok, let's do some flipping:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV(); // Flip vertical, use flipH to flip horizontal
4. document.body.appendChild(l_oImage.fetch());

And rotate it some degrees:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3); // rotate 3 degrees
5. document.body.appendChild(l_oPhoto.fetch());

Drop shadow and make sketchy..

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.makeSketchy();
7. document.body.appendChild(l_oPhoto.fetch());

Or, make it greyscale?:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.flipV();
4. l_oPhoto.rotate(3);
5. l_oPhoto.dropShadow();
6. l_oPhoto.toGreyScale();
7. document.body.appendChild(l_oPhoto.fetch());

Adding a caption:

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
6. document.body.appendChild(l_oPhoto.fetch());

And finally, because we can't live without Chuck Norris :-):

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption('Cheers, Chuck', '1942.ttf');
6. l_oPhoto.addChuckNorris(); // every library should have this function imo
7. document.body.appendChild(l_oPhoto.fetch());

Chaining
Phototype supports chaining:

1.  
2. l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy();
3. document.body.appendChild(l_oPhoto.fetch());
4.  

That's it. I'm really looking forward to your comments, you can download the full package here, it's GPL licensed.