Responsive Mobile-friendly Image Cropper With jQuery - rcrop

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.

More features:

• Grid style crop area.
• Highly customizable and stylable via CSS.
• Based on HTML5 canvas.
• Supports base64 image encoded.
• Preview the cropped image before uploading.

How to use it:

1. Load the jQuery rcrop plugin's files into your html page which has jQuery library loaded.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/rcrop.min.js" ></script>
<link href="dist/rcrop.min.css" rel="stylesheet">

2. Call the function on the target image you want to crop.

$('#image').rcrop();

3. Customize the crop area with the following options.

$('#image').rcrop({

  // full-size crop area
  full : false,

  // min / max size of crop area
  minSize : [20, 20],
  maxSize : [null, null],

  // preserve the original radio
  preserveAspectRatio : false,

  // generate an input with crop data
  inputs : true,

  // prefix to input
  inputsPrefix : '',

  // grid style crop area
  grid : false
  
});

4. Display a preview of your cropped image.

$('#image').rcrop({

  preview : {
    display : true,
    size : [50, 50], //Also: ['100%', '100%'],
    wrapper : '' // where append preview to
  }

});

5. API methods.

// set the size & position of crop area
$.rcrop('resize', width, height, x, y);

// get values of crop area
$.rcrop('getValues');

// destroy the plugin
$.rcrop('destroy');

6. Events.

$('#image').on('rcrop-changed', function(){
  // When crop area has been changed.
})

$('#image').on('rcrop-ready', function(){
  // When image has been read and rCrop is ready.
})

$('#image').on('rcrop-change', function(){
  // When crop area is being changed.
})

7. The sample CSS to custom the crop area & handlers.

.rcrop-outer-wrapper { opacity: .75; }

.rcrop-outer { background: #000 }

.rcrop-croparea-inner { border: 1px dashed #fff; }

.rcrop-handler-corner {
  width: 12px;
  height: 12px;
  background: none;
  border : 0 solid #51aeff;
}

.rcrop-handler-top-left {
  border-top-width: 4px;
  border-left-width: 4px;
  top: -2px;
  left: -2px
}

.rcrop-handler-top-right {
  border-top-width: 4px;
  border-right-width: 4px;
  top: -2px;
  right: -2px
}

.rcrop-handler-bottom-right {
  border-bottom-width: 4px;
  border-right-width: 4px;
  bottom: -2px;
  right: -2px
}

.rcrop-handler-bottom-left {
  border-bottom-width: 4px;
  border-left-width: 4px;
  bottom: -2px;
  left: -2px
}

.rcrop-handler-border { display: none; }

Changelog:

2019-06-05

• Removed duplicate quotation

2018-10-24

• Fix destroy method

---

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