jackgit / image-editor

An image editor that can scale, rotate, move images, and merge images, based on HTML5 canvas

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

var options = {
	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, y
editor.rotateImage(90); // rotate image 90 deg
editor.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 element
editor.setImage(urlObj, 1, false); // if index = 1 image exists, replace it, and not make replaced image as current selected image
editor.removeImage(2); // remove index = 2 image
editor.removeAll(); // remove all images
editor.reset(); // reset as initial status after ImageEditor created
editor.mergeImage(); // merge all images together, returns a canvas DOM

Demo

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

image-editor's Issues

Added features - Remove Background Colour and Unselect all

Added features - Remove Background Colour and Unselect all

Thanks for your hard work. I added some features to my fork

https://github.com/eddyparkinson/image-editor/blob/master/src/ImageEditor.js

请问有联系方式吗

遇到一个问题想请教一下

issue

hi,
it's so good but there are some problems...
when I remove two images inserted to editor then can't insert any new image...
if you can fix that bug plz do it.
tnx for good job on it.

请问怎么不显示关闭按钮？

设置了

    closeButtonRequire:false,
    removeIcon:false,

都没作用，请教怎么取消关闭按钮并且设置不能关闭层？