Pixastic - The New Online Javascript Photo Editor- A Review

Pixastic is an online photo editor powered by Javascript. With Pixastic you can upload images either from your computer or from a URL (currently only from Flickr, Photobucket, Facebook and PicasaWeb), and you can save the edited image to your desktop or have a temporary URL generated for your picture. I hope you remember our previous article on an online photo optimizer tool, Smushit (where even the developer himself, Stoyan Stefanov came in to appreciate). Pixastic’s developer Jacob Seidelin has been working on this as part of an all-Javascript image editor. It allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript. So lemme give you a brief idea of what this Pixastic is all about.

Working Principle

For a project to work like this, you must be more than interested to know how this application works. The core functionality of Pixastic is a three phased one.

• Most of the Pixastic actions work by accessing the pixel data of the image and manipulating the image on pixel by pixel basis. This is done via the getImageData() / putImageData() methods available on the HTML5 canvas element.
• The core Pixastic functions take care of creating a canvas element, draws the image on this element and retrieves the image data.
• Finally, the modified data is put back into the canvas and the process is complete. If the original image element has a parent node, Pixastic automatically replaces the original image with the new canvas element. When doing so, the script tries to transfer the element id, CSS styling and other important properties to the new canvas.

Visual Effects

Pixastic has designed a wonderful website where all the visual effects are demonstrated and you can get the sample code below the demo picture. Here is the chart from where you can exactly land up at the demo page.

1. Some of the effects are, Blur, Mosaic, Sepia etc.
2. You can also adjust the brightness, contrast, color and many more
3. You can also use flip horizontally, flip vertically, rotate and such options.

JavaScript Coding

The main thing you need to do in Pixastic coding is to load  Pixastic .js file(s), a single global object called Pixastic will be available. This object has one interesting method, Pixastic.process, which is used to call all the actions. Let me show you a snippet of the code that the author has put in.

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
			}
		}
	)
}

See its easy but effective.

Screenshots

After Edge Detection

Conclusion

There are some minor glitches. The browser compatibility is an issue which the project needs to solve. Again it is still a low level image processing project. We will be very happy to see some more additions and a bit more perfection. Having said all that, Pixastic is a very good venture which with more improvements may reach the limelight it deserves. Here is wishing him good luck.