Image Resize & Crop Plugin With jQuery And Canvas - cropimage

File Size: 7.07 MB
Views Total: 30870
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Image Resize & Crop Plugin With jQuery And Canvas - cropimage

cropimage (formerly imageResizer) is a lightweight, easy-to-use image cropper & resizer plugin based on jQuery and HTML5 canvas element.

The plugin creates a resizable, movable, rectangular/circular crop area to select and crop an area of an image you specify.

How to use it:

1. Create the information & image crop containers on the webpage.

<div id="infoContainer"></div>
<div id="cropContainer"></div>

2. Create a button to perform the crop function.

<button class="resize-done">Done</button>

3. Import jQuery JavaScript library and the jQuery imageResizer plugin into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="cropimage.js"></script>
<link rel="stylesheet" href="cropimage.css" />

4. Call the plugin on the crop container and specify the image you want to crop.

  image: '1.jpg',
  btnDoneAttr: '.resize-done'

5. Display the cropped image on the page.

  image: '1.jpg',
  btnDoneAttr: '.resize-done'
}, function( imgResized ){
  $('#infoContainer').html( '<img src="'+ imgResized +'">' )

6. More configuration options with default values.


  // Formats: 3/2, 200x360, auto
  imgFormat: 'auto', 

  // min width/height
  minWidth: 0,
  minHeight: 0,

  // lg-md, sm-xs
  device: 'all', 

  // true => circle, square ( by default )
  circleCrop: false, 

  // image zoom options
  zoomable: true,
  zoomMax: 2,

  // custom background
  background: 'transparent', 

  // shows grid
  inBoundGrid: true,

  // black, white
  outBoundColor: 'black'



  • feat: Transparent graphic background option


  • Added more options


  • Renamed to cropimage

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