Lightweight Vanilla Javascript Image Cropper – imagecrop.js

Category: Image , Javascript | July 30, 2018
Author: peterver
Views Total: 4,503
Official Page: Go to website
Last Update: July 30, 2018
License: MIT

Preview:

Lightweight Vanilla Javascript Image Cropper – imagecrop.js

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

You Might Be Interested In:


2 thoughts on “Lightweight Vanilla Javascript Image Cropper – imagecrop.js

  1. Yusuf Akhsan Hidayat

    how to set backgrond color to white if i crop transparent png image ?

    Reply
    1. Yusuf Akhsan Hidayat

      this the solution, i wrote wrong data type as parameter :
      ‘data:image/png’

      Reply

Leave a Reply