Tiny Native JavaScript Image Cropper – Croppr.js

Croppr.js is a simple, lightweight, customizable JS plugin used to crop any images with configurable Aspect Ratio, Min/Max sizes and much more.

Install the Croppr.js:

# NPM
$ npm install croppr
# Bower
$ bower install croppr

How to use it:

Import the croppr:

import Croppr from 'croppr';

Or directly insert the stylesheet croppr.css and JavaScript file croppr.js into your webpage.

<script src="dist/croppr.js"></script>
<link rel="stylesheet" href="dist/croppr.css">

Create a new instance and specify the selector which holds the image you want to crop.

<img src="1.jpg" alt="" id="cropper">

var croppr = new Croppr('#cropper', {
    // settings here
});

var croppr = new Croppr('#cropper', {
    // custom aspect radio
    // e.g.
    aspectRatio: null,
    // min/max sizes
    maxSize: { width: null, height: null },
    minSize: { width: null, height: null },
    // start size of crop region
    startSize: { width: 100, height: 100, unit: '%' },
    // real", "ratio" or "raw"
    returnMode: 'real',
    // callback functions
    onCropStart: function(data) {
      console.log(data.x, data.y, data.width, data.height);
    },
    onCropMove: function(data) {
      console.log(data.x, data.y, data.width, data.height);
    },
    onCropEnd: function(data) {
      console.log(data.x, data.y, data.width, data.height);
    },
    onInitialize: function(instance) {
      // do things here
    }
    
});

API methods.

// returns the crop region
croppr.getValue();
// moves the crop region to the specified coordinates
croppr.moveTo(x,y);
// resizes the crop region to the specified size
croppr.resizeTo(Width, Height, Origin Array);
// scales the crop region by a factor. origin is an optional argument that specifies the origin point (in ratio) to resize from in the format of [x, y]
croppr.scaleBy(Factor, Origin Array);
// Resets the crop region
croppr.reset();

Changelog:

07/08/2018

• Fix getValue returning wrongly rounded values