Javascript image editor library

Question

Hi all,

My friend and I have plan to build a web shop. One of the shop's main feature is the ability for the customer to design their own stuff. My friend took polyvore website as an example.

The above link point to an editor page. In polyvore, the customer can drag and drop items from right-hand side to a 'canvas' in the left-hand side of the page. the image have simple handler for resizing, rotate and move.

This is the main feature that we want to achieve. I want to know if there are any free javascript library out there that provide these functionality? We don't need too advance stuffs, because the goal is not making something like online Photoshop application. The polyvore editor is cover most of feature that we need.

TIA

Answer 1

Pixastic has a simple Javascript image editor:

http://editor.pixastic.com

Answer 2

If you develop your app using a full-featured JavaScript-based framework, like Cappuccino or SproutCore, this kind of lightweight image manipulation should be trivial to implement.

If you want a bit more flexibility with the site implementation, go with a smaller library like jQuery UI or Interface Elements (that's a very incomplete list - there are tons of similar libraries around).

Answer 3

This won't be a full answer, but should guide you. Ext-js has an object called Ext.Resizable, http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable, you can apply it to any node and it will add handles for resizing it. This is not present in their core (jsquery-like) distro, you need the full distribution.

Rotating the images is quite more complicated as that is not supported in all browsers (webkit allows rotation through css). What I suggest is that you use a cross browser canvas library, like http://me.eae.net/projects/iecanvas/demo.html, that allows you to rotate images that are drawn on the canvas. However, you can't really combine the two that I've mentioned, I suggest you look at both of them for inspiration and roll out your own (unless somebody else finds a tool that does it already)