tinycrop

src="https://circleci.com/gh/WebSeed/tinycrop.svg?style=shield"
alt="Build status" />


src="https://img.shields.io/npm/v/tinycrop.svg?style=flat-square"
alt="NPM version" />


src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"
alt="Standard" />


src="https://badge-size.herokuapp.com/WebSeed/tinycrop/master/dist/tinycrop.min.js.svg?compression=gzip"
alt="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

`js
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

`js
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/