# react-image-cropper2

> react image crop

Latest version **1.0.0** (published 2023-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-image-cropper2
pnpm add react-image-cropper2
yarn add react-image-cropper2
bun add react-image-cropper2
```

## 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.0.0 |
| Published | 2023-05-11 |
| First published | 2023-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 430.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jerryshew |
| Maintainers | arianmaykon |
| Keywords | react, image crop, front crop, canvas, react component |

## Links

- npm: https://www.npmjs.com/package/react-image-cropper2
- Repository: https://github.com/arianmaykon/react-image-cropper2
- Homepage: https://github.com
- Issues: https://github.com/arianmaykon/react-image-cropper2/issues
- npm.io page: https://npm.io/package/react-image-cropper2

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [deep-extend](https://npm.io/package/deep-extend.md) 0.5.1
- [npm-run-all](https://npm.io/package/npm-run-all.md) ^4.1.1

## 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.0.0 (latest) — 2023-05-11

## README

# collaborators wanted
I have barely no time work on improve this project, needs collaborators for project maintenance.

> **NOTE: This is a fork/based from https://github.com/flyfloor/react-image-cropper primarily to fix security issues within it's dependencies.**

## React Image Cropper 2

[![Downloads](https://img.shields.io/npm/dt/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper2)
[![Version](https://img.shields.io/npm/v/react-image-cropper.svg)](https://www.npmjs.com/package/react-image-cropper2)

A React.JS Image Cropper
Touch supported

**[See the demo](http://braavos.me/react-image-cropper/)**

Custom:

+ initial cropper frame position 
+ frame width, height, ratio
+ crop event

### Hot to Use

+ `import {Cropper} from 'react-image-cropper2'`

+ styles are all inline

+ define Cropper with src, and ref to execute crop method  

```
<Cropper 
    src="http://braavos.me/images/posts/college-rock/the-smiths.png" 
    ref={ ref => { this.cropper = ref }}
/>
```

+ crop and get image url

`image.src = this.cropper.crop()`

+ get crop values:

`const values = this.cropper.values()`

values: 

```
{
    // display values
    display: {
        width, // frame width
        height, // frame height
        x, // original x position
        y, // original y position
        imgWidth, // img width
        imgHeight, // img height
    },
    // original values
    original: {
        width, // frame width
        height, // frame height
        x, // original x position
        y, // original y position
        imgWidth, // img width
        imgHeight, // img height
    }
}
```


+ onChange for preview

(values) => onChange(values)

+ custom use

| prop  |  value   |
|:-------:|:--------|
| ratio | width / height |
| width | cropper frame width |
| height | cropper frame height |
| originX | cropper original position(x axis), accroding to image left|
| originY | cropper original position(Y axis), accroding to image top|
| fixedRatio | turn on/off fixed ratio (bool default true) |
| allowNewSelection | allow user to create a new selection instead of reusing initial selection (bool default true) |
| styles | specify styles to override inline styles |
| onImgLoad | specify fuction callback to run when the image completed loading |
| beforeImgload | specify function callback to run when the image size value is ready but image is not completed loading |
| onChange | triggred when dragging stop, get values of cropper |


**[See the demo](http://braavos.me/react-image-cropper/)**

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