https://github.com/react-component/cropping
image cropping
https://github.com/react-component/cropping
Last synced: 4 months ago
JSON representation
image cropping
- Host: GitHub
- URL: https://github.com/react-component/cropping
- Owner: react-component
- License: mit
- Created: 2016-11-09T11:22:21.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-07-26T21:15:12.000Z (over 4 years ago)
- Last Synced: 2025-08-15T13:55:08.626Z (4 months ago)
- Language: TypeScript
- Homepage: https://react-component.github.io/cropping/
- Size: 4.64 MB
- Stars: 58
- Watchers: 6
- Forks: 13
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
# rc-cropping
---
React Cropping Component
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-cropping.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-cropping
[travis-image]: https://img.shields.io/travis/react-component/cropping.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/cropping
[coveralls-image]: https://img.shields.io/coveralls/react-component/cropping.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/cropping?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/cropping.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/cropping
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-cropping.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-cropping
## Feature
* Cropping pictures in facebook mode.
* Cropping result preview.
* Supports exporting circle and square picture.
* I18n.
* [FUTURE] Rotate picture.
## Screenshots
## Development
```
npm install
npm start
```
## Example
http://localhost:8001/examples/
online example: http://react-component.github.io/cropping/
## install
[](https://npmjs.org/package/rc-cropping)
## Usage
```js
var Cropping = require('rc-cropping');
var React = require('react');
ReactDOM.render( loading... }
renderModal={() => }
circle={true}
/>, document.getElementById('__react-content'));
```
## API
### props
name
type
default
description
className
String
additional css class of root dom node
getSpinContent
Function() => React.Component
spin content of Cropper
renderModal
Function() => React.Component
Modal Render of Component, you can pass any React Component to replace it.
locale
'en-US' | 'zh-CN'
i18n locale.
circle
boolean
false
Croppe circle image or not. If true, you'll get a circle picture. Notice: transparent background *ONLY* supported in png file, croppe jpg file will get white background.
resizer
function
null
Cropper support custom image resize function, e.g., you can use [pica](https://github.com/nodeca/pica) to down scale your picture more perfectly
## Test Case
```
npm test
npm run chrome-test
```
## Coverage
```
npm run coverage
```
open coverage/ dir
## License
rc-cropping is released under the MIT license.