Skip to content
Pure JavaScript image crop library
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Upgrade tinytouch (fix FF issues) Mar 30, 2017
images
lib Add onInit option Jan 18, 2017
react-example Upgrade tinytouch (fix FF issues) Mar 30, 2017
src Add onInit option Jan 18, 2017
styles Bucket full of changes Dec 5, 2015
.babelrc
.eslintrc
.gitignore
README.md fix syntax in examples (#3) Jun 30, 2018
favicon.ico
index.html
package.json Upgrade tinytouch (fix FF issues) Mar 30, 2017
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/

You can’t perform that action at this time.