# antd-img-edit

> ## Install

Latest version **1.0.4** (published 2021-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install antd-img-edit
pnpm add antd-img-edit
yarn add antd-img-edit
bun add antd-img-edit
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-06-18 |
| First published | 2021-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 332.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jason Lin |
| Maintainers | jadson666 |

## Links

- npm: https://www.npmjs.com/package/antd-img-edit
- Homepage: https://github.com/Jadson666/antd-img-edit
- npm.io page: https://npm.io/package/antd-img-edit

## Dependencies (2)

- [react-easy-crop](https://npm.io/package/react-easy-crop.md) ^3.5.1
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.6.2

## Recent versions

- 1.0.4 (latest) — 2021-06-18
- 1.0.3 — 2021-06-18
- 1.0.2 — 2021-06-18
- 1.0.1 — 2021-06-18

## README

develope base on https://www.npmjs.com/package/antd-img-crop
I add the functionality of mirror the image

# antd-img-edit


## Install

```sh
yarn add antd-img-edit
```

## Usage

```jsx harmony
import ImgCrop from 'antd-img-edit';
import { Upload } from 'antd';

const Demo = () => (
  <ImgCrop flip rotate>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);
```

## Props

| Prop         | Type                 | Default        | Description                                                           |
| ------------ | -------------------- | -------------- | --------------------------------------------------------------------- |
| aspect       | `number`             | `1 / 1`        | Aspect of crop area , `width / height`                                |
| shape        | `string`             | `'rect'`       | Shape of crop area, `'rect'` or `'round'`                             |
| grid         | `boolean`            | `false`        | Show grid of crop area (third-lines)                                  |
| quality      | `number`             | `0.4`          | Image quality, `0 ~ 1`                                                |
| fillColor    | `string`             | `white`        | Fill color when cropped image smaller than canvas                     |
| zoom         | `boolean`            | `true`         | Enable zoom for image                                                 |
| flip         | `boolean`            | `true`         | enable horizontal flip and vertical flip of image                                                 |
| rotate       | `boolean`            | `false`        | Enable rotate for image                                               |
| minZoom      | `number`             | `1`            | Minimum zoom factor                                                   |
| maxZoom      | `number`             | `3`            | Maximum zoom factor                                                   |
| modalTitle   | `string`             | `'Edit image'` | Title of modal                                                        |
| modalWidth   | `number` \| `string` | `520`          | Width of modal in pixels number or percentages                        |
| modalOk      | `string`             | `'OK'`         | Text of confirm button of modal                                       |
| modalCancel  | `string`             | `'Cancel'`     | Text of cancel button of modal                                        |
| beforeCrop   | `function`           | -              | Call before modal open, if return `false`, it'll not open             |
| cropperProps | `object`             | -              | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |

## Styles

To prevent overwriting the custom styles to `antd`, `antd-img-edit` does not import the style files of components.

Therefore, if your project configured `babel-plugin-import`, and not use `Modal` or `Slider`, you need to import the styles yourself:

```js
import 'antd/es/modal/style';
import 'antd/es/slider/style';
```

## License

[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/master/LICENSE) (c) [nanxiaobei](https://mrlee.me/)

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