ImageEditor

ImageEditor is a jQuery plugin which can scale, rotate, move images, and merge images, based on HTML5 canvas. And now it supports multi touch in mobile phones, thanks to Hammer.js

Usage

varoptions={imageUrls: [{url: 'assets/images/pic-2.jpg',closeButtonRequire: false},{url: 'assets/images/background-1.png',closeButtonRequire: false,clickToSelect: false,onClick: function(){editor.selectImage(0);}},'assets/images/mustache.png'],width: 300,height: 300,onInitCompleted: function(){editor.selectImage(0);// select most bottom image as current operating image}},editor=$('#editor').ImageEditor(options);// init a DIV as ImageEditor

Public methods

editor.moveImage(deltaX,deltaY);// move image to delta x, yeditor.rotateImage(90);// rotate image 90 degeditor.scaleImage(1.5);// scale as 1.5 size (for both width and height)editor.addImage(urlObj,true);// add image, and make it as current selected image for operation. structure of urlObj refers to options imageUrls array elementeditor.setImage(urlObj,1,false);// if index = 1 image exists, replace it, and not make replaced image as current selected imageeditor.removeImage(2);// remove index = 2 imageeditor.removeAll();// remove all imageseditor.reset();// reset as initial status after ImageEditor creatededitor.mergeImage();// merge all images together, returns a canvas DOM

Demo

http://jackgit.github.io/image-editor/index.html