antd-img-crop 3.14.2 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +31 -35
- package/README.zh-CN.md +31 -35
- package/dist/antd-img-crop.cjs.js +216 -208
- package/dist/antd-img-crop.esm.js +208 -199
- package/index.d.ts +6 -1
- package/package.json +13 -21
- package/src/index.jsx +0 -412
- package/src/index.less +0 -52
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -5,18 +5,22 @@ An image cropper for Ant Design [Upload](https://ant.design/components/upload/).
|
|
|
5
5
|
[](https://www.npmjs.com/package/antd-img-crop)
|
|
6
6
|
[](https://www.npmtrends.com/antd-img-crop)
|
|
7
7
|
[](https://bundlephobia.com/result?p=antd-img-crop)
|
|
8
|
-
[](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
8
|
+
[](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
|
|
9
9
|
|
|
10
10
|
English | [简体中文](./README.zh-CN.md)
|
|
11
11
|
|
|
12
|
+
> Since 4.0, no need to manually import Modal & Slider style files.
|
|
13
|
+
|
|
12
14
|
## Demo
|
|
13
15
|
|
|
14
|
-
[
|
|
16
|
+
[](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
|
|
15
17
|
|
|
16
18
|
## Install
|
|
17
19
|
|
|
18
20
|
```sh
|
|
19
21
|
yarn add antd-img-crop
|
|
22
|
+
|
|
23
|
+
# npm install antd-img-crop
|
|
20
24
|
```
|
|
21
25
|
|
|
22
26
|
## Usage
|
|
@@ -34,44 +38,36 @@ const Demo = () => (
|
|
|
34
38
|
|
|
35
39
|
## Props
|
|
36
40
|
|
|
37
|
-
| Prop
|
|
38
|
-
|
|
|
39
|
-
| aspect
|
|
40
|
-
| shape
|
|
41
|
-
| grid
|
|
42
|
-
| quality
|
|
43
|
-
| fillColor
|
|
44
|
-
| zoom
|
|
45
|
-
| rotate
|
|
46
|
-
| minZoom
|
|
47
|
-
| maxZoom
|
|
48
|
-
| modalTitle
|
|
49
|
-
| modalWidth
|
|
50
|
-
| modalOk
|
|
51
|
-
| modalCancel
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
To prevent overwriting the custom styles to `antd`, `antd-img-crop` does not import the style files of components.
|
|
58
|
-
|
|
59
|
-
Therefore, if your project configured `babel-plugin-import`, and not use `Modal` or `Slider`, you need to import the styles yourself:
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
import 'antd/es/modal/style';
|
|
63
|
-
import 'antd/es/slider/style';
|
|
64
|
-
```
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| ------------- | -------------------- | -------------- | --------------------------------------------------------------------- |
|
|
43
|
+
| aspect | `number` | `1 / 1` | Aspect of crop area , `width / height` |
|
|
44
|
+
| shape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
|
|
45
|
+
| grid | `boolean` | `false` | Show grid of crop area (third-lines) |
|
|
46
|
+
| quality | `number` | `0.4` | Image quality, `0 ~ 1` |
|
|
47
|
+
| fillColor | `string` | `'white'` | Fill color when cropped image smaller than canvas |
|
|
48
|
+
| zoom | `boolean` | `true` | Enable zoom for image |
|
|
49
|
+
| rotate | `boolean` | `false` | Enable rotate for image |
|
|
50
|
+
| minZoom | `number` | `1` | Minimum zoom factor |
|
|
51
|
+
| maxZoom | `number` | `3` | Maximum zoom factor |
|
|
52
|
+
| modalTitle | `string` | `'Edit image'` | Title of modal |
|
|
53
|
+
| modalWidth | `number` \| `string` | `520` | Width of modal in pixels number or percentages |
|
|
54
|
+
| modalOk | `string` | `'OK'` | Text of modal confirm button |
|
|
55
|
+
| modalCancel | `string` | `'Cancel'` | Text of modal cancel button |
|
|
56
|
+
| onModalOk | `function` | - | Call when click modal confirm button |
|
|
57
|
+
| onModalCancel | `function` | - | Call when click modal mask, top right "x", or cancel button |
|
|
58
|
+
| beforeCrop | `function` | - | Call before modal open, if return `false`, it'll not open |
|
|
59
|
+
| onUploadFail | `function` | - | Call when upload failed |
|
|
60
|
+
| cropperProps | `object` | - | Props of [react-easy-crop] (\* [existing props] cannot be overridden) |
|
|
65
61
|
|
|
66
62
|
## License
|
|
67
63
|
|
|
68
|
-
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
64
|
+
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
|
|
69
65
|
|
|
70
66
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
71
|
-
[existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
67
|
+
[existing props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
|
|
72
68
|
|
|
73
|
-
##
|
|
69
|
+
## FUTAKE
|
|
74
70
|
|
|
75
|
-
|
|
71
|
+
Try [**FUTAKE**](https://sotake.com/f) in WeChat. A mini app for your inspiration moments. 🌈
|
|
76
72
|
|
|
77
|
-
|
package/README.zh-CN.md
CHANGED
|
@@ -5,18 +5,22 @@
|
|
|
5
5
|
[](https://www.npmjs.com/package/antd-img-crop)
|
|
6
6
|
[](https://www.npmtrends.com/antd-img-crop)
|
|
7
7
|
[](https://bundlephobia.com/result?p=antd-img-crop)
|
|
8
|
-
[](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
8
|
+
[](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE)
|
|
9
9
|
|
|
10
10
|
[English](./README.md) | 简体中文
|
|
11
11
|
|
|
12
|
+
> 4.0 版本起，再无需手动引入 Modal 和 Slider 样式文件。
|
|
13
|
+
|
|
12
14
|
## 示例
|
|
13
15
|
|
|
14
|
-
[
|
|
16
|
+
[](https://codesandbox.io/s/antd-img-crop-4qoom5p9x4?fontsize=14&hidenavigation=1&theme=dark)
|
|
15
17
|
|
|
16
18
|
## 安装
|
|
17
19
|
|
|
18
20
|
```sh
|
|
19
21
|
yarn add antd-img-crop
|
|
22
|
+
|
|
23
|
+
# npm install antd-img-crop
|
|
20
24
|
```
|
|
21
25
|
|
|
22
26
|
## 使用
|
|
@@ -34,44 +38,36 @@ const Demo = () => (
|
|
|
34
38
|
|
|
35
39
|
## Props
|
|
36
40
|
|
|
37
|
-
| 属性
|
|
38
|
-
|
|
|
39
|
-
| aspect
|
|
40
|
-
| shape
|
|
41
|
-
| grid
|
|
42
|
-
| quality
|
|
43
|
-
| fillColor
|
|
44
|
-
| zoom
|
|
45
|
-
| rotate
|
|
46
|
-
| minZoom
|
|
47
|
-
| maxZoom
|
|
48
|
-
| modalTitle
|
|
49
|
-
| modalWidth
|
|
50
|
-
| modalOk
|
|
51
|
-
| modalCancel
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
为防止覆盖自定义 `antd` 样式，`antd-img-crop` 中没有引入组件样式文件。
|
|
58
|
-
|
|
59
|
-
因此如果你的项目配置了 `babel-plugin-import`，且未使用 `Modal` 或 `Slider`，则需自行引入样式：
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
import 'antd/es/modal/style';
|
|
63
|
-
import 'antd/es/slider/style';
|
|
64
|
-
```
|
|
41
|
+
| 属性 | 类型 | 默认 | 说明 |
|
|
42
|
+
| ------------- | -------------------- | ------------ | ------------------------------------------------------ |
|
|
43
|
+
| aspect | `number` | `1 / 1` | 裁切区域宽高比，`width / height` |
|
|
44
|
+
| shape | `string` | `'rect'` | 裁切区域形状，`'rect'` 或 `'round'` |
|
|
45
|
+
| grid | `boolean` | `false` | 显示裁切区域网格（九宫格） |
|
|
46
|
+
| quality | `number` | `0.4` | 图片质量，`0 ~ 1` |
|
|
47
|
+
| fillColor | `string` | `'white'` | 裁切图像小于画布时的填充颜色 |
|
|
48
|
+
| zoom | `boolean` | `true` | 启用图片缩放 |
|
|
49
|
+
| rotate | `boolean` | `false` | 启用图片旋转 |
|
|
50
|
+
| minZoom | `number` | `1` | 最小缩放倍数 |
|
|
51
|
+
| maxZoom | `number` | `3` | 最大缩放倍数 |
|
|
52
|
+
| modalTitle | `string` | `'编辑图片'` | 弹窗标题 |
|
|
53
|
+
| modalWidth | `number` \| `string` | `520` | 弹窗宽度，`px` 的数值或百分比 |
|
|
54
|
+
| modalOk | `string` | `'确定'` | 弹窗确定按钮文字 |
|
|
55
|
+
| modalCancel | `string` | `'取消'` | 弹窗取消按钮文字 |
|
|
56
|
+
| onModalOK | `function` | - | 点击弹窗确定回调 |
|
|
57
|
+
| onModalCancel | `function` | - | 点击弹窗遮罩层、右上角叉、取消的回调 |
|
|
58
|
+
| beforeCrop | `function` | - | 弹窗打开前调用，若返回 `false`，弹框将不会打开 |
|
|
59
|
+
| onUploadFail | `function` | - | 上传失败时的回调 |
|
|
60
|
+
| cropperProps | `object` | - | [react-easy-crop] 的 props（\* [已有 props] 无法重写） |
|
|
65
61
|
|
|
66
62
|
## 协议
|
|
67
63
|
|
|
68
|
-
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
64
|
+
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
|
|
69
65
|
|
|
70
66
|
[react-easy-crop]: https://github.com/ricardo-ch/react-easy-crop#props
|
|
71
|
-
[已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/
|
|
67
|
+
[已有 props]: https://github.com/nanxiaobei/antd-img-crop/blob/main/src/index.jsx#L78-L94
|
|
72
68
|
|
|
73
|
-
##
|
|
69
|
+
## FUTAKE
|
|
74
70
|
|
|
75
|
-
|
|
71
|
+
试试 [**FUTAKE**](https://sotake.com/f) 小程序，你的灵感相册。🌈
|
|
76
72
|
|
|
77
|
-
|