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:
-
-
var img = document.getElement("myImage"); // get the image element
-
-
if (img.complete) { // make sure the image is fully loaded
-
Pixastic.process(
-
img,
-
"brightness", // brightness/contrast adjustment
-
-
{ // options object
-
-
"brightness" : 60, // set brightness option value to 60
-
"contrast" : 0.5, // set contrast option value to 0.5,
-
"rect" : { // apply the effect to this region only
-
"left" : 100,
-
"right" : 100,
-
"width" : 200,
-
"height" : 150
-
}
-
}
-
)
-
}
-
There's also a jQuery plug-in wrapper, allowing you to do stuff like this:
JAVASCRIPT:
-
-
// invert the image with id="prettyface"
-
$("#prettyface").pixastic("invert");
-
-
// convert all images with class="photo" to greyscale
-
$(".photo").pixastic("desaturate");
-
-
// chained blur and a regional emboss, see image further down
-
$("#myimage")
-
.pixastic("blurfast", {amount:0.2})
-
.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!
4 rating from 24 votes
Very cool to see something like this done in native browser code. Wish it had an undo button though.
Tip: Ctrl+Z
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.
The library is available under the MIT license, the editor code is closed for now.
Also, blog post: http://blog.nihilogic.dk/2008/12/pixastic-now-javascript-image.html
Very Nice! just another one of the many cool uses of Ajax!
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
Great respectable work! Online apps are definitely the way forth, and seeing a good system for graphic manipulation is another step forward!
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.
@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.