Antd-img-crop NPM

Link in bio to widgets, your online home screen. ➫ 🔗 kee.so

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`	最大缩放
minAspect	`number`	`0.5`	最小裁切比
maxAspect	`number`	`2`	最大裁切比
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

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 xl-api suo-test suo-web-all @discode/antd @cver-design/pro-web @cver-design/web @boyuai/fe-base @bluedot-tech/bluedot-antd @payping/web-components @payping/desktop-components itz-container-library ispl jh-components jz-image-manager jfd-workbench-material kewei-gobest l-ant-design now-and-wow quiccui ssc-components tinso-scantron trade-components toplionweb @appthen/antd @an_mengdi/lowcode-app-material @asurraa/sura-ui-upload @ccs-ui/eui @ccs-ui/rc-pro @cherrypulp/image-upload @activity-maker/hi-components @ada-lc/pro-material @cqsjjb/jjb-react-admin-component z-mining-base yc-design yucky zhframe-test wangchangwei-mylib wangchangwei-mylib-jl wangjing-test-lbb2c unified-cli upload-file-tools vetech vetechh zmdms-webui @ferlab/ui @hankliu/hankliu-ui @lava-x/antd @levantr/khaos @luotongxin/lowcode-app-material @mtbird/component-basic @nicecode/meta @maydaydevteam/yeeeyes-design @meliplatform/web-core @moon-design/pro-web @omniumretail/component-library @raycloud-apaas-fe-setup/react-basic-widgets @quansitech/antd-admin @recruitery/rr_login_plugin @plus-base/component @passero/khaos @restcloud-npm/rc-lowcode-component mfe-user-template misyuan-antd owenfly oss-ui oak-general-business pasubot-quick pasubot-quick-panel pasubot-ui-panels pasubot-user-panel pasubot1 pasubot-auth-ui-react react-antd-asset-manager ruxd nmtsmartformsdk plus-base-component procloud-admin-components rk-react-js-xtratus-fork rlj-pro quick-ui-design shookt snowbeer-ui gobestsoft2023 goletter-react hygon-components lighting-design linkmore-design ll-123

7 months ago

11 months 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

2 years 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

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

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

3 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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

antd-img-crop

安装

使用

Props

FAQ

ConfigProvider 无效？

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

协议

`ConfigProvider` 无效？

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