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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<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.

$('#cropContainer').resizeImage({
  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', 
  // 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.