# rc-cropper

> Cropper as React components

Latest version **1.3.1** (published 2017-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-cropper
pnpm add rc-cropper
yarn add rc-cropper
bun add rc-cropper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2017-07-27 |
| First published | 2017-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | xiefei89 |
| Maintainers | xiefei89 |
| Keywords | react, react-component, cropper, image |

## Links

- npm: https://www.npmjs.com/package/rc-cropper
- Repository: https://github.com/xiefei89/rc-cropper
- Homepage: https://github.com/xiefei89/rc-cropper/
- Issues: https://github.com/xiefei89/rc-cropper/issues
- npm.io page: https://npm.io/package/rc-cropper

## Dependencies (2)

- [cropperjs](https://npm.io/package/cropperjs.md) ^1.0.0-rc.3
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2017-07-27
- 1.3.0 — 2017-07-27
- 1.2.0 — 2017-07-25
- 1.1.2 — 2017-07-24
- 1.1.1 — 2017-07-24
- 1.1.0 — 2017-07-24
- 1.0.0 — 2017-07-24
- 0.2.2 — 2017-07-18
- 0.2.1 — 2017-07-18
- 0.2.0 — 2017-07-18
- 0.1.0 — 2017-07-18

## README

# rc-cropper

An react component wrapping the [Cropperjs](https://github.com/fengyuanchen/cropperjs).

## Cropperjs Docs

* [Image Cropper](https://github.com/fengyuanchen/cropperjs)

## Installation
Install via [npm](https://www.npmjs.com/package/rc-cropper)

```shell
npm install --save rc-cropper
```

## Example

Inspired by [react-cropper](https://github.com/roadmanfong/react-cropper)

```js
import React, {Component} from 'react'
import Cropper from 'rc-cropper'
class Demo extends Component {
  crop(){
    const canvas = this.refs.cropper.getCroppedCanvas()
    const url = canvas.toDataURL() // image url
    const blob = canvas.toBlob(blob => {
      // upload the blob or do anything else
    })
  }

  render() {
    const options = {
      aspectRatio: 16 / 9
    }
    return (
      <Cropper
        ref='cropper'
        src='http://fengyuanchen.github.io/cropper/images/picture.jpg'
        options={options} />
    )
  }
}
```

## Props
name | type | default | description
---|---|---|---
src | string | | image src
className | string |  | custom class name
locale | object | | for i18n
zoomStep | number | 0.2 | zoom step
moveStep | number | 2px | move step
rotateStep | number | 45deg | rotate step
onReady | function |  | callback when the cropper is ready
showActions | bool | false | whether show action buttons, support zoom/move/rotate
outputImgSize | object | | specify the output canvas size, format: {width: *, height: *}
containerSizeLimit | object | {  maxWidth: 500, maxHeight: 500, minWidth: 50, minHeight: 50} | the size limitation of image container
cropBoxEditable | bool | true | Whether the cropbox width and height can edit by input. If `outputImgSize` is set, this property would be invaild
options | object |  | options for [cropperjs](https://github.com/fengyuanchen/cropper)

Note:
* If `outputImgSize` is specified and no `aspectRatio` specified in `options`, rc-cropper will caculate the `aspectRatio` based on `outputImgSize` automatically. `aspectRation = outputImgSize.width / outputImgSize.height`

---
_Source: https://npm.io/package/rc-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._