Pure JavaScript image crop library
Switch branches/tags
Clone or download
Pull request Compare This branch is even with WebSeed:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
images
lib
react-example
src
styles Bucket full of changes Dec 5, 2015
.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/