https://github.com/willbamford/tinycrop
Pure JavaScript image crop library
https://github.com/willbamford/tinycrop
crop image-cropper javascript react
Last synced: 6 months ago
JSON representation
Pure JavaScript image crop library
- Host: GitHub
- URL: https://github.com/willbamford/tinycrop
- Owner: willbamford
- Created: 2015-11-22T10:11:39.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-03-11T17:01:56.000Z (over 2 years ago)
- Last Synced: 2025-04-04T16:06:04.590Z (about 1 year ago)
- Topics: crop, image-cropper, javascript, react
- Language: JavaScript
- Homepage: http://willbamford.github.io/tinycrop/
- Size: 6.36 MB
- Stars: 72
- Watchers: 4
- Forks: 18
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚨 Sorry this repo is no longer maintained
# tinycrop
Lightweight pure JavaScript image crop library. [Plays nicely with React](http://willbamford.github.io/tinycrop/react-example).
## Install from repository
Using NPM:
```
npm i tinycrop -S
```
Or [Yarn](https://yarnpkg.com):
```
yarn add tinycrop
```
## Build from source
1. Install nodejs
1. Clone this repository
1.
```bash
npm install
```
1.
```bash
npm run build
```
## Create new cropper
```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://willbamford.github.io/tinycrop/