Responsive Cropper is a full responsive JQuery plugin that lets you select an area from an image and prepare crop information to send it to the server.
Switch branches/tags
Nothing to show
Clone or download
aewebsolutions Fix destroy method
Plugin instance stored in element's data is now removed when destroy method is called
Latest commit 634f693 Oct 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos Update basic.html Jul 21, 2017
dist Fix destroy method Oct 23, 2018
libs Add files via upload Jul 12, 2016
src Fix destroy method Oct 23, 2018
LICENSE Initial commit Jul 12, 2016
README.md Update README.md Jul 12, 2016

README.md

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