jQuery Plugin For Cropping & Resizing Images - easyCrop

File Size: 324 KB
Views Total: 2842
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Cropping & Resizing Images - easyCrop

easyCrop is a jQuery plugin used to logically resize and crop an image to make none-proportional images display more effectively relative to their container element.

Features:

  • Vertical image crop.
  • Horizontal image crop.
  • Resize the image in the appropriate dimension, then crop it accordingly depending on the aspect in which it's been resized.

How to use it:

1. Include jQuery library and the jQuery easyCrop plugin on the html page.

<script src="jquery.min.js"></script>
<script src="js/easyCrop.jquery.js"></script>

2. Add the CSS class 'easyCrop' to your image and wrap it into a container named 'easyContainer'.

<div class="easyContainer">
  <img src="demo.jpg" class="easyCrop">
</div>

3. Crop & resize the images based on data-* attributes.

<div class="easyContainer" 
     data-crop-position-horizontal="right" 
     data-crop-position-vertical="top"
>
     <img src="demo.jpg" class="easyCrop">
</div>

4. Available option.

onResize: false

Change log:

2015-06-02

  • Changing function name. Adding resize event. Adding onResize option.

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