tinycrop

Lightweight pure JavaScript image crop library. Plays nicely with React.

Install from repository

Using NPM:

npm i tinycrop -S

Or Yarn:

yarn add tinycrop

Build from source

1. Install nodejs
2. Clone this repository

3. npm install
   

4. npm run build
   

Create new cropper

var Crop = require('tinycrop')

var crop = Crop.create({
  parent: '#mount',
  image: 'images/portrait.jpg',
  bounds: {
    width: '100%',
    height: '50%'
  },
  backgroundColors: ['#fff', '#f3f3f3'],
  selection: {
    color: 'red',
    activeColor: 'blue',
    aspectRatio: 4 / 3,
    minWidth: 200,
    minHeight: 300,
    width: 400,
    height: 500,
    x: 100,
    y: 500
  },
  onInit: () => { console.log('Initialised') }
});

Events

crop
  .on('start', function (region) { console.log('Start', region) })
  .on('move', function (region) { console.log('Move', region) })
  .on('resize', function (region) { console.log('Resize', region) })
  .on('change', function (region) { console.log('Change', region) })
  .on('end', function (region) { console.log('End', region) });

Demo

http://willbamford.github.io/tinycrop/