Package Exports

croppr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (croppr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Croppr.js

A JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.

Simple
Lightweight (<5kb minified and gzipped)
Made only with vanilla JS
Zero dependencies

Try it out in the demo → Demo in progress

Installation

Via NPM:

npm install croppr -—save

// CommonJS
var Croppr = require('croppr');

// ES6 import
import Croppr from 'croppr';

Note: Don't forget to bundle or include croppr.css!

Via script tag:

<link src="path/to/croppr.css" rel="stylesheet"/>
<script src="path/to/croppr.js"></script>

Basic Usage

In your HTML document:

<img src="path/to/image.jpg" id="croppr"/>

In your JavaScript file:

var cropInstance = new Croppr('#croppr', {
  // ...options
});

Protip: You can also pass an Element object directly instead of a selector.

To retrieve crop region:

var data = cropInstance.getValue();
// data = {x: 20, y: 20: width: 120, height: 120}

Options

####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, '%'] (A maximum size of 50% of the image size)

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: minSize: [20, 20, 'px'] (A minimum width and height of 20px)

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 '%'.

onUpdate

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

Type: Function
Arguments: data = {x, y, width, height}
Example:

onUpdate: function(data) {
  console.log(data.x, data.y, data.width, data.height);
}

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.

Methods

**getValue(returnMode?: string)**

Returns the value of the crop region. returnMode inherits from options by default. Refer to returnMode for possible values.

var value = cropInstance.getValue();
// value = {x: 21, y: 63: width: 120, height: 120}

var ratio = cropInstance.getValue('ratio');
// value = {x: 0.1, y: 0.3: width: 0.57, height: 0.57}