Create a jQuery Plugin A Simple Front-end Image Editor

picEdit plugin will turn the <input type=”file” box on the form into a small image editor/uploader. Perform basic image operations and preview the image before uploading it to the server.

The functionality of the plugin is similar to that presented in the pasteboard.co website and photobooth.js library.

How to make use of it:

1. Include the required styles on the page to provide the basic styles.

<link rel="stylesheet" type="text/css" href="css/styles.css" />

2. Create an HTML image editor.

<div id="thebox" class="picedit_box"> 
<!-- Picedit navigation -->
<div class="picedit_nav_box picedit_gray_gradient">
<div class="picedit_pos_elements"></div>
<div class="picedit_nav_elements"> 
<!-- Picedit button element begin -->
<div class="picedit_element"> <span class="picedit_control ico-picedit-redo" title="Rotate"></span>
<div class="picedit_control_menu">
<div class="picedit_control_menu_container picedit_tooltip picedit_elm_1">
<label> <span>90&deg; CW</span> <span class="picedit_control ico-picedit-redo" data-action="rotate_cw"></span> </label>
<label> <span>90&deg; CCW</span> <span class="picedit_control ico-picedit-undo" data-action="rotate_ccw"></span> </label>
</div>
</div>
</div>
<!-- Picedit button element end --> 
<!-- Picedit button element begin -->
<div class="picedit_element"> <span class="picedit_control ico-picedit-arrow-maximise" title="Resize"></span>
<div class="picedit_control_menu">
<div class="picedit_control_menu_container picedit_tooltip picedit_elm_2">
<label> <span>Width (px)</span>
<input type="text" class="picedit_input" data-variable="resize_width" value="0">
</label>
<label> <span>Height (px)</span>
<input type="text" class="picedit_input" data-variable="resize_height" value="0">
</label>
</div>
</div>
</div>
<!-- Picedit button element end --> 
</div>
</div>
<!-- Picedit canvas element -->
<div class="picedit_canvas_box">
<div class="picedit_action_btns">
<div class="picedit_control ico-picedit-picture" data-action="load_image">
<input type="file" class="imageload" accept="image/*">
</div>
<div class="picedit_control ico-picedit-camera" data-action="take_photo"></div>
</div>
<div class="picedit_canvas">
<canvas></canvas>
</div>
</div>
</div>

3. Include the necessary JavaScript files at the bottom of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="src/picedit.js"></script> 

4. Call the extension.

$(function() {
  $('#thebox').picEdit();
});

5. Default parameters.

// Image updated callback function
imageUpdated: function(img){},	

// After form was submitted callback function
formSubmitted: function(res){},	

// Page url for redirect on form submit
redirectUrl: false,	

// Max width parameter
maxWidth: 400,	

// Max height parameter
maxHeight: 'auto',	

// Preserve aspect ratio
aspectRatio: true,	

// Default image to be used with the plugin
defaultImage: false             

Must Read – Full-Featured Photo Image Editor Using Canvas | tui.image-editor

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.

Read More – 

A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor
Vue Image Markup Editing Library Javascript With Vue.js


See Demo And Download

Official Website(andyvr): Click Here

This superior jQuery/javascript plugin is developed by andyvr. For extra Advanced Usage, please go to the official website.

Share