Thursday, December 18th, 2008

Pixastic: JavaScript Image Manipulation Library

Category: Canvas, JavaScript

Pixastic uses <canvas>’s ability to expose raw pixel information to perform Photoshop-style image manipulation effects all in your standards-based browser. For an example of Pixastic in action, the library’s authors have built a cute little Photoshop clone in a browser:

Here’s an example of using the underlying API:

javascript

  1. var img = document.getElement("myImage"); // get the image element
  2.  
  3. if (img.complete) { // make sure the image is fully loaded
  4.     Pixastic.process(
  5.         img,
  6.         "brightness",   // brightness/contrast adjustment
  7.  
  8.         {       // options object
  9.  
  10.             "brightness" : 60,  // set brightness option value to 60
  11.             "contrast" : 0.5,   // set contrast option value to 0.5,
  12.             "rect" : {      // apply the effect to this region only
  13.                 "left" : 100,
  14.                 "right" : 100,
  15.                 "width" : 200,
  16.                 "height" : 150
  17.             }
  18.         }
  19.     )
  20. }

There’s also a jQuery plug-in wrapper, allowing you to do stuff like this:

javascript

  1. // invert the image with id="prettyface"
  2. $("#prettyface").pixastic("invert");
  3.  
  4. // convert all images with class="photo" to greyscale
  5. $(".photo").pixastic("desaturate");
  6.  
  7. // chained blur and a regional emboss, see image further down
  8. $("#myimage")
  9.     .pixastic("blurfast", {amount:0.2})
  10.     .pixastic("emboss", {direction:"topleft", rect:{left:50,top:50,width:150,height:150}});

The architecture of the library is nice; there’s a small core Pixastic library file (pixastic.core.js) and then each effect is factored out into its own JS file. A handy web interface lets you download your own minified subset of Pixastic.

Cool!

Posted by Ben Galbraith at 11:57 am
8 Comments

+++--
3.8 rating from 31 votes

8 Comments »

Comments feed TrackBack URI

Very cool to see something like this done in native browser code. Wish it had an undo button though.

Comment by tj111 — December 18, 2008

Tip: Ctrl+Z

Comment by jseidelin — December 18, 2008

That’s really awesome. What license will the code have? It just needs a way to save it up to a server and it’s a great tool for a CMS.

Comment by Fyzbo — December 18, 2008

Very Nice! just another one of the many cool uses of Ajax!

Comment by cssProdigy — December 18, 2008

Here is an example of image resizing [seam-carving] using the canvas tag

http://n.parashuram.googlepages.com/seamcarving.html
Details here –
http://dy-verse.blogspot.com/search/label/seam%20carving

Comment by axemclion — December 18, 2008

Great respectable work! Online apps are definitely the way forth, and seeing a good system for graphic manipulation is another step forward!

Comment by oopstudios — December 19, 2008

But what do you do with the image after you’ve altered it? Is there a server-side component as well so that you can actually write the changes to disk? If not, this is just a toy, no matter how slick.

Comment by starkraving — December 19, 2008

@starkraving uhh if it’s canvas you can just right click, save as. You get a png. This is true for any canvas based app.

Comment by Breton — December 19, 2008

Leave a comment

You must be logged in to post a comment.