Lightweight Vanilla Javascript Image Cropper – imagecrop.js

Preview:

Description:

imagecrop.js is a pure vanilla JavaScript library that creates a rectangle area around a given image allowing to visually resize an image and place a crop.

How to use it:

Load the imagecrop.min.css and imagecrop.js in your document.

<link rel="stylesheet" href="imagecrop.min.css">
<script src="imagecrop.js"></script>

Create a new image cropper instance.

// Selector: CSS selector for the image cropper
// image_url: path to your image
// options: available options.
//   -- max_width: the maximum width
//   -- max_height: the maximum height
//   -- update: callback function
//   -- min_crop_width: the minimum width that the cropped image can be
//   -- min_crop_height: the miminum height that the cropped image can be
//   -- create_cb: callback function
//   -- update_cb: callback function
//   -- destroy_cb: callback function
//   -- fixed_size: if it should constrain the size of the cropped area to be fixed or not ?
//   -- mode: the type of preview you should see when using the image cropper, 'square' or 'circular'
img_c = new ImageCropper(selector, image_url, options);

Perform the image cropping.

// mime_type: image/jpeg or image/png
// quality: 1 is the highest quality setting, and 0 is the lowest quality setting
var img_b64_str = img_c.crop(mime_type, quality);

Changelog:

v1.4.0 (07/30/2018)

• Added more options