HTML5 Picture Editor

HTML5 Picture editor is an open source online image generator, which allows you to add images, text and let you to style them as you want. It is developed using HTML5 and JavaScript libraries Fabric.js & commonly used jQuery. It's UI is designed with Twitter bootstrap.

Features

• Add multiple images
• Scale, rotate, resize & relocate image
• Add multiple text
• Change font, size, bg color, text color, line height, bold, italic, underline, line-though & over-line text.
• Add shadow to objects
• Save as draft, PNG and JPEG.
• Change canvas size and its background.

Screenshots

Demo

Follow this URL to see working demo: Link

Developer Resources

Check out the URLs bellow to find out how its done:
fabric.js
jQuery
Twitter bootstrap

Kick Starter (for developers)

Just fork the repository, clone it or just download its source. Deploy it on any directory on a machine where Apache/PHP running.

Configuration

Using Pet.js: Define your own custom messages

var MESSAGES = [
	'Fabric library is missing.',
	'Are you sure?',
	'This browser doesn\'t provide this feature',
	'Saved',
	'Post data is missing',
	'Saving draft',
	'Exporting as JPEG',
	'Exporting as PNG',
	'Loading from draft',
	'Maximum width of the image can be set to ',
	'Maximum height of the image can be set to ',
	'Value is invalid'
];

For a different server side define your own http URLs:

var PAGES = [
	'draft.php',
	'view.php'
];

For exporting images; look at upload.php also in html form.

Interested in contributing?

If you wanna add more features and user options then just fork this repo from the link bellow: https://github.com/waqar-alamgir/html5-picture-editor/fork

Credits

html5-picture-editor by Waqar Alamgir
Web
Twitter

luckykun/html5-picture-editor