Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

tinycrop

Build status NPM version Standard File size

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/