Croppr.js

Lightweight, awesome, vanilla JS image cropper.
LightweightCroppr is as light as a feather at less than 6kb minified and gzipped!
Deliciously vanillaCroppr is made only with 100% native, deliciously vanilla JavaScript
Zero dependenciesCroppr is a strong, independent JavaScript component who don't need no dependencies
Demo
Selection valuex 500y 500width 500height 500

A

W

H

W

H

Installation
Basic Usage
  1. Include the files in your project:
    <link src="path/to/croppr.css" rel="stylesheet"/>
    <script src="path/to/croppr.js"></script>
    Or if you're smart and you use a module bundler:
    // CommonJS
    var Croppr = require('croppr');
    
    // ES6 import
    import Croppr from 'croppr';
    
    // Don't forgot to bundle the CSS files as well!
  2. In your HTML document:
    <img src="path/to/image.jpg" id="croppr"/>
  3. Create the instance in your JavaScript file:
    var croppr = new Croppr('#croppr', {
      // options
    });
    
    // Protip: You can also pass an Element object instead of a selector
    
  4. And to retrieve the crop value:
    var value = croppr.getValue();
    // data = {x: 20, y: 20: width: 120, height: 120}
    
Options
OptionDescription
aspectRatio

Constrain the crop region to an aspect ratio.

  • Type: Number
  • Default: null
  • Example: aspectRatio: 1 (Square)
maxSize

Constrain the crop region to a maximum size.

  • Type: [width, height, unit?]
  • Default: null
  • Example: maxSize: [50, 50, '%'] (Max size of 50% of the image)

Note: unit accepts a value of 'px' or '%'. Defaults to 'px'.

minSize

Constrain the crop region to a minimum size.

  • Type: [width, height, unit?]
  • Default: null
  • Example: maxSize: [100, 100, 'px'] (Min width and height of 100px)

Note: unit accepts a value of 'px' or '%'. Defaults to 'px'.

startSize

The starting size of the crop region when it is initialized.

  • Type: [width, height, unit?]
  • Default: [100, 100, '%'] (A starting crop region as large as possible)
  • Example: startSize: [50, 50] (A starting crop region of 50% of the image size)

Note: unit accepts a value of 'px' or '%'. Defaults to '%'.

onCropStart

A callback function that is called when the user starts modifying the crop region.

  • Type: Function
  • Arguments: value = {x, y, width, height}
  • Example:
    onCropStart: function(value) {
      console.log(value.x, value.y, value.width, value.height);
    }
onCropMove

A callback function that is called when the crop region changes.

  • Type: Function
  • Arguments: value = {x, y, width, height}
  • Example:
    onUpdate: function(value) {
      console.log(value.x, value.y, value.width, value.height);
    }
onCropEnd

A callback function that is called when the user stops modifying the crop region.

  • Type: Function
  • Arguments: value = {x, y, width, height}
  • Example:
    onCropEnd: function(value) {
      console.log(value.x, value.y, value.width, value.height);
    }
onInitialize

A callback function that is called when the Croppr instance is fully initialized.

  • Type: Function
  • Arguments: The Croppr instance
  • Example:
    onInitialize: function(instance) {
      // do things here
    }
returnMode

Define how the crop region should be calculated.

  • Type: String
  • Default: "real"
  • Possible values: "real", "ratio", or "raw"
    • real returns the crop region values based on the size of the image's actual sizes. This ensures that the crop region values are the same regardless if the Croppr element is scaled or not.
    • ratio returns the crop region values as a ratio between 0 to 1. e.g. For example, an x, y position at the center will be {x: 0.5, y: 0.5}.
    • raw returns the crop region values as is based on the size of the Croppr element.