Antd-img-crop NPM

antd-img-crop

图片裁切工具，用于 Ant Design Upload 组件

English | 简体中文

安装

pnpm add antd-img-crop
# or
yarn add antd-img-crop
# or
npm i antd-img-crop

使用

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';

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

Props

属性	类型	默认	说明
quality	`number`	`0.4`	裁切图片质量，`0` 到 `1` 之间
fillColor	`string`	`'white'`	裁切图像填充色
zoomSlider	`boolean`	`true`	图片缩放控制
rotationSlider	`boolean`	`false`	图片旋转控制
aspectSlider	`boolean`	`false`	裁切比率控制
showReset	`boolean`	`false`	显示重置按钮，重置缩放旋转及比率
resetText	`string`	`重置`	重置按钮文字
aspect	`number`	`1 / 1`	裁切区域宽高比，`width / height`
minZoom	`number`	`1`	最小缩放倍数
maxZoom	`number`	`3`	最大缩放倍数
cropShape	`string`	`'rect'`	裁切区域形状，`'rect'` 或 `'round'`
showGrid	`boolean`	`false`	显示裁切区域网格（九宫格）
cropperProps	`object`	-	react-easy-crop 的 props（* 已有 props 无法重写）
modalClassName	`string`	`''`	弹窗 className
modalTitle	`string`	`'编辑图片'`	弹窗标题
modalWidth	`number` \| `string`		弹窗宽度
modalOk	`string`		确定按钮文字
modalCancel	`string`		取消按钮文字
onModalOK	`function`	-	点击确定按钮的回调
onModalCancel	`function`	-	点击取消按钮、遮罩层、或右上角 'x' 的回调
modalProps	`object`		Ant Design Modal 的 props（* 已有 props 无法重写）
beforeCrop	`function`	-	裁切弹窗打开前的回调，若返回 `false` 或 `reject`，弹窗将不会打开

FAQ

`ConfigProvider` 无效？

尝试设置 libraryDirectory（'es' 或 'lib'）到 babel-plugin-import 的配置项，看看哪个会生效。

module.exports = {
  plugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
};

没有样式？（仅 `antd<=v4`）

若使用 antd<=v4 + babel-plugin-import，且未引入 Modal 或 Slider，请手动引入这些样式：

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

协议

MIT License (c) nanxiaobei

react antd ant-design upload image crop cropper

compare-versions react-easy-crop tslib

elena-lib moneko.console ooxx_uidemo @toplion/web zc-sui cognitiveleap-core cognitiveleap-core-us @infinitebrahmanuniverse/nolb-antd suo-test-sc @everything-registry/sub-chunk-1144 zhframe cgxui @nicecode/meta @luotongxin/lowcode-app-material rlj-pro rk-react-js-xtratus-fork deer-common-admin-react kewei-gobest dn-pc-components jz-image-manager dooringx-sdk crec-lib crec2-lib ssc-components ll-123 management-platform-base-component suo-test suo-web-all knowdesign lighting-design linkmore-design lwj-business-frontend lwj-editor l-ant-design shookt easyj-antd5-components easyj-web-components easyj-demo nmtsmartformsdk upload-file-tools misyuan-antd mfe-user-template @passero/khaos @payping/web-components @payping/desktop-components @plus-base/component @shengkai/share @whalecloud/fdx-extensions @webpressvn/editor @raycloud-apaas-fe-setup/react-basic-widgets @recruitery/rr_login_plugin @yanote/kinza-ui-kit @zalastax/nolb-antd @zhou.lang/components abeta-ui @w-way/e-form @vteam_components/shared @vicoders/editor @vh-admin/pro-components @yunbaoyuan/bill-templates @travelpassero/khaos @wufengteam/baguaeditor @wufengteam/dashboard ant-nest antd-form-document antd-image-upload-and-crop antd-form-mobile antd-enhancer aniday-login-plugin antd-admin antd-advancedv4 aoligei @appthen/antd @ada-lc/pro-material @activity-maker/hi-components beca-ui bitz-react-web betanet-ui @asurraa/sura-ui-upload bitz-react-admin bitz-react-admin-test bitz-react-admin-ui bu2-ui bluedot-antd bluedot-components @bluedot-tech/bluedot-antd @boyuai/fe-base artcube-2-dev-plugin aristid-ds @an_mengdi/lowcode-app-material hygon-components @cqsjjb/jjb-react-admin-component celesea-design @cherrypulp/image-upload antd-pro-components-lowcode-materials antd-pro-plus cloud-toplion common-mid ispl culinary-portal-preview-component

4 months ago

4 months ago

4 months ago

5 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

antd-img-crop

安装

使用

Props

FAQ

ConfigProvider 无效？

没有样式？（仅 antd<=v4）

协议

`ConfigProvider` 无效？

没有样式？（仅 `antd<=v4`）