antd-img-crop 4.10.0 → 4.10.1
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/README.md +27 -25
- package/README.zh-CN.md +3 -8
- package/dist/antd-img-crop.cjs.js +2 -2
- package/dist/antd-img-crop.esm.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,30 +37,32 @@ const Demo = () => (
|
|
|
37
37
|
|
|
38
38
|
## Props
|
|
39
39
|
|
|
40
|
-
| Prop | Type
|
|
41
|
-
| -------------- |
|
|
42
|
-
| quality | `number`
|
|
43
|
-
| fillColor | `string`
|
|
44
|
-
| zoomSlider | `boolean`
|
|
45
|
-
| rotationSlider | `boolean`
|
|
46
|
-
| aspectSlider | `boolean`
|
|
47
|
-
| showReset | `boolean`
|
|
48
|
-
| aspect | `number`
|
|
49
|
-
| minZoom | `number`
|
|
50
|
-
| maxZoom | `number`
|
|
51
|
-
| cropShape | `string`
|
|
52
|
-
| showGrid | `boolean`
|
|
53
|
-
| cropperProps | `object`
|
|
54
|
-
| modalClassName | `string`
|
|
55
|
-
| modalTitle | `string`
|
|
56
|
-
| modalWidth | `number`
|
|
57
|
-
| modalOk | `string`
|
|
58
|
-
| modalCancel | `string`
|
|
59
|
-
| onModalOk | `function`
|
|
60
|
-
| onModalCancel | `function`
|
|
61
|
-
| modalProps | `object`
|
|
62
|
-
| beforeCrop | `function`
|
|
63
|
-
| onUploadFail | `function`
|
|
40
|
+
| Prop | Type | Default | Description |
|
|
41
|
+
| -------------- | ---------- | -------------- | ----------------------------------------------------------------- |
|
|
42
|
+
| quality | `number` | `0.4` | Cropped image quality, `0` to `1` |
|
|
43
|
+
| fillColor | `string` | `'white'` | Fill color when cropped image smaller than canvas |
|
|
44
|
+
| zoomSlider | `boolean` | `true` | Enable zoom adjustment for image |
|
|
45
|
+
| rotationSlider | `boolean` | `false` | Enable rotation adjustment for image |
|
|
46
|
+
| aspectSlider | `boolean` | `false` | Enable aspect adjustment for crop area |
|
|
47
|
+
| showReset | `boolean` | `false` | show a reset button to reset zoom, rotation, aspect |
|
|
48
|
+
| aspect | `number` | `1 / 1` | Aspect of crop area , `width / height` |
|
|
49
|
+
| minZoom | `number` | `1` | Minimum zoom factor |
|
|
50
|
+
| maxZoom | `number` | `3` | Maximum zoom factor |
|
|
51
|
+
| cropShape | `string` | `'rect'` | Shape of crop area, `'rect'` or `'round'` |
|
|
52
|
+
| showGrid | `boolean` | `false` | Show grid of crop area (third-lines) |
|
|
53
|
+
| cropperProps | `object` | - | [react-easy-crop] props (\* existing props cannot be overridden) |
|
|
54
|
+
| modalClassName | `string` | `''` | Provide your own classname for the Modal container |
|
|
55
|
+
| modalTitle | `string` | `'Edit image'` | Title of modal |
|
|
56
|
+
| modalWidth | `number` | `string` | Width of modal in pixels number or percentages |
|
|
57
|
+
| modalOk | `string` | | Text of modal confirm button |
|
|
58
|
+
| modalCancel | `string` | | Text of modal cancel button |
|
|
59
|
+
| onModalOk | `function` | - | Call when click modal confirm button |
|
|
60
|
+
| onModalCancel | `function` | - | Call when click modal mask, top right "x", or cancel button |
|
|
61
|
+
| modalProps | `object` | | [Ant Design Modal] props (\* existing props cannot be overridden) |
|
|
62
|
+
| beforeCrop | `function` | - | Call before modal open, if return `false`, it'll not open |
|
|
63
|
+
| onUploadFail | `function` | - | Call when upload failed |
|
|
64
|
+
|
|
65
|
+
## FAQ
|
|
64
66
|
|
|
65
67
|
### `ConfigProvider` not work?
|
|
66
68
|
|
|
@@ -74,7 +76,7 @@ module.exports = {
|
|
|
74
76
|
};
|
|
75
77
|
```
|
|
76
78
|
|
|
77
|
-
|
|
79
|
+
### No style? (only `antd<=v4`)
|
|
78
80
|
|
|
79
81
|
If you use `antd<=v4` + `babel-plugin-import`, and no `Modal` or `Slider` were imported, please import these styles manually:
|
|
80
82
|
|
package/README.zh-CN.md
CHANGED
|
@@ -62,6 +62,8 @@ const Demo = () => (
|
|
|
62
62
|
| beforeCrop | `function` | - | 弹窗打开前调用，若返回 `false`，弹框将不会打开 |
|
|
63
63
|
| onUploadFail | `function` | - | 上传失败时的回调 |
|
|
64
64
|
|
|
65
|
+
## FAQ
|
|
66
|
+
|
|
65
67
|
### `ConfigProvider` 无效？
|
|
66
68
|
|
|
67
69
|
尝试设置 `libraryDirectory`（`'es'` 或 `'lib'`）到 `babel-plugin-import` 的配置项，看看哪个会生效。
|
|
@@ -74,7 +76,7 @@ module.exports = {
|
|
|
74
76
|
};
|
|
75
77
|
```
|
|
76
78
|
|
|
77
|
-
|
|
79
|
+
### 没有样式？（仅 `antd<=v4`）
|
|
78
80
|
|
|
79
81
|
若使用 `antd<=v4` + `babel-plugin-import`，且未引入 `Modal` 或 `Slider`，请手动引入这些样式：
|
|
80
82
|
|
|
@@ -83,13 +85,6 @@ import 'antd/es/modal/style';
|
|
|
83
85
|
import 'antd/es/slider/style';
|
|
84
86
|
```
|
|
85
87
|
|
|
86
|
-
## 在 antd v5 之前
|
|
87
|
-
|
|
88
|
-
```js
|
|
89
|
-
import 'antd/es/modal/style';
|
|
90
|
-
import 'antd/es/slider/style';
|
|
91
|
-
```
|
|
92
|
-
|
|
93
88
|
## 协议
|
|
94
89
|
|
|
95
90
|
[MIT License](https://github.com/nanxiaobei/antd-img-crop/blob/main/LICENSE) (c) [nanxiaobei](https://lee.so/)
|
|
@@ -87,7 +87,7 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.
|
|
90
|
+
var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-20:disabled{opacity:.2}.\\[\\&\\~section\\:first-of-type\\]\\:mt-4~section:first-of-type{margin-top:1rem}.\\[\\&\\~section\\:last-of-type\\]\\:mb-4~section:last-of-type{margin-bottom:1rem}";
|
|
91
91
|
styleInject(css_248z);
|
|
92
92
|
|
|
93
93
|
const openKey = compareVersions.compareVersions(antd.version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
@@ -263,7 +263,7 @@ const ImgCrop = react.forwardRef((props, cropperRef) => {
|
|
|
263
263
|
const lang = typeof window === 'undefined' ? '' : window.navigator.language;
|
|
264
264
|
const isCN = lang === 'zh-CN';
|
|
265
265
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
266
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
266
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [uploadComponent, image && (jsxRuntime.jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: true }, { title: title, onOk: onOk, onCancel: onCancel, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true }, { children: jsxRuntime.jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, image: image, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
|
|
267
267
|
});
|
|
268
268
|
|
|
269
269
|
module.exports = ImgCrop;
|
|
@@ -85,7 +85,7 @@ function styleInject(css, ref) {
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.
|
|
88
|
+
var css_248z = ".container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.\\!relative{position:relative!important}.bottom-\\[20px\\]{bottom:20px}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\\[40vh\\]{height:40vh}.w-3\\/5{width:60%}.w-8{width:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.bg-transparent{background-color:transparent}.font-\\[inherit\\]{font-family:inherit}.\\!text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px}.disabled\\:cursor-default:disabled{cursor:default}.disabled\\:opacity-20:disabled{opacity:.2}.\\[\\&\\~section\\:first-of-type\\]\\:mt-4~section:first-of-type{margin-top:1rem}.\\[\\&\\~section\\:last-of-type\\]\\:mb-4~section:last-of-type{margin-bottom:1rem}";
|
|
89
89
|
styleInject(css_248z);
|
|
90
90
|
|
|
91
91
|
const openKey = compareVersions(version, '4.23.0') === -1 ? 'visible' : 'open';
|
|
@@ -261,7 +261,7 @@ const ImgCrop = forwardRef((props, cropperRef) => {
|
|
|
261
261
|
const lang = typeof window === 'undefined' ? '' : window.navigator.language;
|
|
262
262
|
const isCN = lang === 'zh-CN';
|
|
263
263
|
const title = modalTitle || (isCN ? '编辑图片' : 'Edit image');
|
|
264
|
-
return (jsxs(Fragment, { children: [
|
|
264
|
+
return (jsxs(Fragment, { children: [uploadComponent, image && (jsx(AntModal, Object.assign({}, modalProps, modalBaseProps, { [openKey]: true }, { title: title, onOk: onOk, onCancel: onCancel, wrapClassName: wrapClassName, maskClosable: false, destroyOnClose: true }, { children: jsx(EasyCrop$1, { ref: easyCropRef, cropperRef: cropperRef, zoomSlider: zoomSlider, rotationSlider: rotationSlider, aspectSlider: aspectSlider, showReset: showReset, image: image, aspect: aspect, minZoom: minZoom, maxZoom: maxZoom, cropShape: cropShape, showGrid: showGrid, cropperProps: cropperProps, isCN: isCN }) })))] }));
|
|
265
265
|
});
|
|
266
266
|
|
|
267
267
|
export { ImgCrop as default };
|