Mobile-friendly, responsive image cropper with jQuery – rcrop

Rcrop is a fully responsive image cropper, mobile-compatible, jQuery based. The solution allows to resize images on the client side, while preserving the original aspect ratios.

Responsive image cropper with jQuery

Rcrop 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. Core 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
– Easy CSS/SCSS full customization
– Preserve Aspect ratio: shift key or from options
– Responsive (percentage values)
– Minimum and Maximum crop area
– Mobile compatibility and more.

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.

Mobile-ready, responsive image cropper for JS
Mobile-ready, responsive image cropper for JS

Setup

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

Sample

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

// Add a preview and a grid helper
$('#image-1').rcrop({
    minSize : [160,90],
    preserveAspectRatio : true,
    grid : true,
    preview : {
        display: true,
        size : [80,45]
    }
});

License: MIT

Homepage/github

https://github.com/aewebsolutions/rcrop

Demo

Basic:

https://rawgit.com/aewebsolutions/rcrop/master/demos/basic.html

Advanced:

https://rawgit.com/aewebsolutions/rcrop/master/demos/advanced.html

scraperapi

See also

Fit images in container with jQuery – imgLiquid plugin

Responsive ReactJS carousel gallery: react-image-gallery

JavaScript file upload library – filepond JS, with adapters for Vue and React JS!

Enjoy responsive image cropper ^^