Zoom/Rotate/Crop/Preview Images Before Uploading - ImgUploader

An advanced image uploader that allows the user to zoom, rotate, crop, edit images with custom filters before being uploaded to the server side.

The image crop functionality is based on the croppie plugin.

Works with the native file input and compatible with the latest Bootstrap framework.

How to use it:

1. Load the ImgUploader & Croppie plugins in the HTML document which has the latest jQuery JavaScript library installed.

<link rel="stylesheet" href="/path/to/croppie.css">
<script src="/path/to/jquery-latest.min.js"></script>
<script src="/path/to/croppie.min.js"></script>
<script src="/path/to/imguploader.minify.js"></script>
<!-- For Bootstrap Project -->
<script src="/path/to/imguploader.bs.minify.js"></script>

2. Create a normal file input for the image uploader. All possible attributes to customize the image uploader:

• editor(required): image editor
• size(required): 'viewport', 'original', or {width,height}
• passurl(required): where the uploader sends the image data via AJAX
• target: empty img tag that holds the new uploaded image
• status: displays the upload status
• w/h: editor width & height
• pshape: 'square' or 'circle'

<input type="file" 
       class="img-upload-input" 
       editor="#img-upload-panel"
       target="#image" 
       status="#status" 
       passurl="" 
       pshape="square" 
       w=300 
       h=300 
       size="viewport"
       />

3. Create controls & filters for the image editor. That's it.

<label>Brightness</label>
<input type="range" class="filter" min=0 max=200 value=100 step=1 filter="brightness"/>

<label>Threshold</label>
<input type="range" class="filter" min=0 max=200 value=100 step=1 filter="threshold"/>

<button type="button" class="filter" filter="grayscale">Grayscale</button>

<button type="button" class="filter" filter="sharpen">Sharpen</button>

<button type="button" class="filter" filter="blur">Blur</button>

<button type="button" class="img-clear-filter">Clear</button>

<button type="button" class="img-rotate-left">Rotate Left</button>

<button type="button" class="img-rotate-right">Rotate Right</button>

<button type="button" class="img-remove-btn">Clear</button>
<button type="button" class="img-upload-btn">Upload</button>

---

This awesome jQuery plugin is developed by tarun-bisht. For more Advanced Usages, please check the demo page or visit the official website.