Crop/Select An Area From An Image - jQuery CropSelectJs

CropSelectJs is a user interface plugin that allows you to select an area within an image using a draggable selection window. The interface is intuitive and easy to use, allowing you to select an area by simply moving and resizing an on screen selection rectangle.

An example application would be for selecting which part of an image should be used for a user's profile image. Your user can upload an image in a form, and CropSelectJs will allow them to visually select which part should be cropped for their profile image. You can also restrict the selection aspect ratio to insist users select a specific shape (such as a square).

Installation:

# NPM
$ npm install crop-select-js

# Bower
$ bower install crop-select-js

How to use it:

1. Add jQuery library and the jQuery CropSelectJs plugin's files to the html page.

<link rel="stylesheet" href="crop-select-js.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="crop-select-js.min.js"></script>

2. Create a container for the image cropping/selection area.

<div id='crop-select'></div>

3. Call the function on the container element and specify image you want to crop.

$('#crop-select').CropSelectJs({
  imageSrc: 'image.jpg'
});

4. More default configuration options.

$('#crop-select').CropSelectJs({
  animatedBorder: true,
  aspectRatio:null,

  // Image
  imageSrc: null,
  imageWidth: null,
  imageHeight: null,

  // Stub events
  selectionResize: function() {},
  selectionMove: function() {}
});

5. API methods.

// Make the selection border animated
$('#crop-select').CropSelectJs('enableAnimatedBorder');

// Make the selection border static (not animated)
$('#crop-select').CropSelectJs('disableAnimatedBorder');

// Get the X coordinate of the selection box
$('#crop-select').CropSelectJs('getSelectionBoxX');

// Set the X coordinate of the selection box
$('#crop-select').CropSelectJs('setSelectionBoxX');

// Get the Y coordinate of the selection box
$('#crop-select').CropSelectJs('getSelectionBoxY');

// Set the Y coordinate of the selection box
$('#crop-select').CropSelectJs('setSelectionBoxY');

// Get the width of the selection box
$('#crop-select').CropSelectJs('getSelectionBoxWidth');

// Set the width of the selection box
$('#crop-select').CropSelectJs('setSelectionBoxWidth');

// Get the height of the selection box
$('#crop-select').CropSelectJs('getSelectionBoxHeight');

// Set the height of the selection box
$('#crop-select').CropSelectJs('setSelectionBoxHeight');

// Set the aspect ratio of the selection box
$('#crop-select').CropSelectJs('setSelectionAspectRatio');

// Clear the aspect ratio of the selection box (allows free resizing)
$('#crop-select').CropSelectJs('clearSelectionAspectRatio');

// Get the src to the current image being displayed
$('#crop-select').CropSelectJs('getImageSrc');

// Get the width of the current image being displayed
$('#crop-select').CropSelectJs('getImageWidth');

// Get the height of the current image being display
$('#crop-select').CropSelectJs('getImageHeight');

// Get the width of the current image being displayed
$('#crop-select').CropSelectJs('getImageAspectRatio');

// Get the aspect ratio of the current image being displayed
$('#crop-select').CropSelectJs('setImageSrc');

// Select the entire image
$('#crop-select').CropSelectJs('selectEverything');

// Select a square centred in the middle of the image
$('#crop-select').CropSelectJs('selectCentredSquare');

// Select an area matching the aspect ratio centred in the middle of the image
$('#crop-select').CropSelectJs('selectCentredFittedAspectRatio');

About Author:

Author: Zara 4

Website: https://zara4.com

---

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