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.

$('#cropContainer').cropimage({
  image: '1.jpg',
  btnDoneAttr: '.resize-done'
});

5. Display the cropped image on the page.

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

6. More configuration options with default values.

$('#cropContainer').resizeImage({

  // 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'
  
})

Changelog:

2023-08-12

• v1.0.0 stable

2022-12-20

• feat: Transparent graphic background option

2022-11-27

• Added more options

2022-08-10

• 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.