Image Resize & Crop Plugin With jQuery And Canvas - imageResizer

Image Resize & Crop Plugin With jQuery And Canvas - imageResizer

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.

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="" 
<script src="jquery.resizeImage.test.js"></script>
<link rel="stylesheet" href="style.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', 
  // lg-md, sm-xs
  device: 'all', 
  // true => circle, square ( by default )
  circleCrop: false, 
  // image zoom options
  zoomable: true,
  zoomMax: 2,
  // black, white
  outBoundColor: 'black'

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

  • Publication date: 20.06.2018
  • Source