Phototype: image manipulation with Javascript

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. l_oPhoto = new Photo().load(“test.jpg”).dropShadow().flipH().makeSketchy();
  2. document.body.appendChild(l_oPhoto.fetch());

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