picEdit

This plugin is work in progress! Use with caution!

The plugin will turn your form's <input type="file"... box into a tiny image editor/uploader. Perform basic image operations and preview your image before uploading to the server. The functionality for the plugin is very similar to the one introduced in pasteboard.co website and photobooth.js library.

In other words, your good old html form with the file upload field, like this:

will change to something more user-friendly:

This plugin allows you to receive images from 3 different sources:

1. You can search your computer for images by clicking on the image button in the center of the plugin, it will behave just like a regular file input field, you can also drag-and-drop your image on to the widget (work only in browsers that support drag and drop api)
2. You can use your computer/tablet web-camera to make a photo by clicking on the camera button in the center of the plugin (work only in browsers that support WebRTC)
3. You can copy and paste the image from the clipboard (work only in browsers that support clipboard api)

The plugin allows to perform image rotations, cropping, resizing and pen tool. Once you're done with the image manipulations you can just upload the form as usual, the updated image will be uploaded along with the form as the a part of the form.

See the demo here: http://andyvr.github.io/picEdit/ ###Available methods and options

defaultImage

type: string, default: false - an image to be loaded in the editor by default ('path/to/image')

maxWidth

type: int/auto, default: 400 - max width for the picedit element (the original image will not be re-scaled if it's wider than maxWidth, this parameter controls image preview only)

maxHeight

type: int/auto, default: auto - max height for the picedit element (same as with maxWidth parameter)

redirectUrl

type: string/bool, default: false - the form redirect url. When defined will redirect the user to the specified url.

imageUpdated

type: func - the callback function to be called when the image is updated/changed. Exposes the image object in the first parameter of the function.

$('#image').picEdit({
  imageUpdated: function(img){
     alert('Image updated!');
  }
});

formSubmitted

type: func - the callback function to be called once the form is submitted to the server. Takes no parameters.

$('#image').picEdit({
  formSubmitted: function(){
     alert('Form submitted!');
  }
});

###Usage Example

Include jquery, the plugin js and css files

<link rel="stylesheet" type="text/css" href="dist/css/styles.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/picedit.min.js"></script>

Create a form in your html with the file upload input box (ex.:)

<form action="upload.php" method="post">
	Name: <input type="text" name="name">
	Image: <input type="file" name="image" id="image">
	<button type="submit">Submit</button>
</form>

Bind the plugin to the file upload input box, that's it!

<script type="text/javascript">
	$(function() {
		$('#image').picEdit();
	});
</script>