Pure JavaScript image crop library
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
images Bucket full of changes Dec 5, 2015
lib
react-example
src
styles
.babelrc
.eslintrc
.gitignore
README.md
favicon.ico
index.html
package.json
webpack.config.js
yarn.lock

README.md

tinycrop

Build status NPM version Standard File size

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

Install

Using NPM:

npm i tinycrop -S

Or Yarn:

yarn add tinycrop

Create

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://webseed.github.io/tinycrop/