mauromorello/picEdit

An attempt to create a simple front-end image editor jQuery plugin that would replace a file-upload input box in a HTML form.

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.

Note: Due to limitations of HTML5 Form API the form will be submitted with XMLHttpRequest/Ajax. The submission is handled by picEdit. If your form uses any js plugins or custom javascript this can create issues!

See the demo here: http://andyvr.github.io/picEdit/ ###Usage Example

Include jquery, the plugin js and css files

<link rel="stylesheet" type="text/css" href="dist/css/picedit.min.css" />
<script type="text/javascript" src="//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 code 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>

###Available methods and options

defaultImage

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

use only images located on the same server to prevent CORS issues

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 it will redirect the user to the specified url after the form is submitted.

imageUpdated

type: func - the callback function to be called when the image is updated/changed. Exposes the image object as 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. Exposes the XMLHttpRequest response object as the first parameter of the function.

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