šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

rcrop is a fully responsive, mobile-compatible jQuery image cropper which allows to resize images on the client side, while preserving the original aspect radios.

Image-Cropping

Documentation

Responsive Cropper Jquery Plugin

Responsive Cropper is a JQuery plugin that lets you select an area from an image and prepare crop information to send it to the server.

You don't need to trigger any event to update crop area when image is resized: this plugin is full responsive. Crop area uses percentages to guarantee full responsiveness, while crop data is stored separately in absolute values.

You can access to crop data easily throw methods, but also plugin makes things easy for you: inputs are are generated and filled with crop information to send to the server.

Last, you can activate a preview or, even, get a base64 image encoded. All that on the client side.

Demos

Features overview

  • Responsive (percentage values)
  • Preserve Aspect ratio: shift key or from options
  • Easy CSS/SCSS full customization
  • Grid
  • Minimum and Maximum crop area
  • Mobile compatibility
  • Methods and Events

Installation

Include JQuery js and pluginā€™s css and js files in your HTML code.

<script src="/lib/jquery.js"></script>  <link rel="stylesheet" href="/dist/rcrop.min.css" type="text/css" />  <script src="/dist/rcrop.min.js"></script>  

Alert: Responsive Cropper uses Clayfy JQuery Plugin to drag an resize selected/crop area. So, if you are thinking to use Clayfy, you wont need to install it twice: just include rcrop files.

Usage

There is a basic usage for Responsive Cropper next. Further information you can find inside demos and options and events tables below.

$(document).ready(function(){      $('#image').rcrop();  });

Defining a minimimum size you are not only setting bounderies for the crop area, but also the aspect ratio that can be preserve.

Also, lets add a preview and a grid helper.

$('#image-4').rcrop({     minSize : [160,90],     preserveAspectRatio : true,     grid : true,     preview : {         display: true,         size : [80,45]     } });

Options

Options can be set locally as a paramater or globally through $.rcrop.settings object.

Name Type Default Description
grid bool false Generate a grid over crop area.
full bool false Whether crop area must cover all image when is initilized.
maxSize array [null, null] Maximum width and height of crop area. If not bounderies are required, set null.
minSize array [20, 20] Minumum width and height of crop area. Also, this defines aspect ratio when preserveAspectRatio is turn on.
preserveAspectRatio bool false Force to preserve aspect ratio of crop area
inputs bool true Generate inputs with crop data (usefull to send to server)
inputsPrefix string void A prefix to inputs.
preview.display bool false Display a preview image of the crop area
preview.wrapper string void a CSS selector (or a JQuery object) where append preview to.
preview.size array [50, 50] Width and height of the preview image.

Events

Event Params Description
rcrop-ready event When image has been read and Responsive Crop is ready.
rcrop-change event When crop area is being changed.
rcrop-changed event When crop area has been changed.

Methods

You can call methods like : $('#image').rcrop('resize', 200,200)

Name Params Return Description
resize width, height, x, y void Set a size and position of the crop area
getValues void Object Get width, height, x, y values of the crop area.
destroy void void destroy instance

License

Responsive Cropper has been developed by Ɓngel Espro. It is licensed under the MIT license


You May Also Like