A Lightweight Image Cropper With No Dependencies – imagecrop.js

Preview:

Description:

imagecrop.js is a lightweight, dependency-free, vanilla JavaScript image cropper that has the ability to crop a specific image with a draggable, resizable crop area.

How to use it:

Link to the main JavaScript file imagecrop.js as this:

<script src="dist/imagecrop.min.js"></script>

Don’t forget to load the required style sheet in the head section of your HTML page.

<link rel="stylesheet" href="dist/imagecrop.min.css">

Create a DIV element for the image cropper.

<div class="example"></div>

Initialize the image cropper and specify the path to the image you want to crop.

const img_c = new ImageCropper(
      ".example",
      "1.jpg"
);

Possible options for the image cropper.

const img_c = new ImageCropper(
      ".example",
      "1.jpg",
      {
        // callbacks
        update_cb : () => {},
        create_cb : () => {},
        destroy_cb : () => {},
        // width & height options
        min_crop_width : 100,
        min_crop_height : 100,
        max_width : 500,
        max_height : 500,
        // constrain the size of the cropped area to be fixed or not 
        fixed_size : false,
        // 'square' or 'circular'
        mode : 'square', 
      }
);

Return a base64 string that you can then do some cool things.

// mime_type: 'image/jpeg' or 'image/png'
// quality: 0 ~ 1
var img_b64_str = img_c.crop(mime_type, quality);

Destroy the image cropper.

img_c.destroy();

Changelog:

v1.4.0 (09/14/2018)

• Update