4.24.0 • Published 6 months ago

antd-img-crop v4.24.0

Weekly downloads
16,955
License
MIT
Repository
github
Last release
6 months ago

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


antd-img-crop

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

npm npm npm bundle size GitHub npm type definitions

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>
);

Edit antd-img-crop

Props

属性类型默认说明
qualitynumber0.4裁切图片质量,01 之间
fillColorstring'white'裁切图像填充色
zoomSliderbooleantrue允许缩放
rotationSliderbooleanfalse允许旋转
aspectSliderbooleanfalse允许调整裁切比
showResetbooleanfalse显示重置按钮,重置缩放 & 旋转 & 裁切比
resetTextstring重置重置按钮文字
aspectnumber1 / 1裁切区域宽高比,width / height
minZoomnumber1最小缩放
maxZoomnumber3最大缩放
minAspectnumber0.5最小裁切比
maxAspectnumber2最大裁切比
cropShapestring'rect'裁切区域形状,'rect''round'
showGridbooleanfalse显示裁切区域网格(九宫格)
cropperPropsobject-react-easy-crop 的 props(* 已有 props 无法重写)
modalClassNamestring''弹窗 className
modalTitlestring'编辑图片'弹窗标题
modalWidthnumber | string弹窗宽度
modalOkstring确定按钮文字
modalCancelstring取消按钮文字
onModalOKfunction-点击确定按钮的回调
onModalCancelfunction-点击取消按钮、遮罩层、或右上角 'x' 的回调
modalPropsobjectAnt Design Modal 的 props(* 已有 props 无法重写)
beforeCropfunction-裁切弹窗打开前的回调,若返回 falsereject,弹窗将不会打开

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,且未引入 ModalSlider,请手动引入这些样式:

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

协议

MIT License (c) nanxiaobei

elena-libmoneko.consoleooxx_uidemo@toplion/webzc-suicognitiveleap-corecognitiveleap-core-us@infinitebrahmanuniverse/nolb-antdsuo-test-sc@everything-registry/sub-chunk-1144zhframecgxuixl-apisuo-testsuo-web-all@discode/antd@cver-design/pro-web@cver-design/web@boyuai/fe-base@bluedot-tech/bluedot-antd@payping/web-components@payping/desktop-componentsitz-container-libraryispljh-componentsjz-image-managerjfd-workbench-materialkewei-gobestl-ant-designnow-and-wowquiccuissc-componentstinso-scantrontrade-componentstoplionweb@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-componentz-mining-baseyc-designyuckyzhframe-testwangchangwei-mylibwangchangwei-mylib-jlwangjing-test-lbb2cunified-cliupload-file-toolsvetechvetechhzmdms-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-componentmfe-user-templatemisyuan-antdowenflyoss-uioak-general-businesspasubot-quickpasubot-quick-panelpasubot-ui-panelspasubot-user-panelpasubot1pasubot-auth-ui-reactreact-antd-asset-managerruxdnmtsmartformsdkplus-base-componentprocloud-admin-componentsrk-react-js-xtratus-forkrlj-proquick-ui-designshooktsnowbeer-uigobestsoft2023goletter-reacthygon-componentslighting-designlinkmore-designll-123
4.24.0

6 months ago

4.23.0

11 months ago

4.22.0

1 year ago

4.21.0

2 years ago

4.20.0

2 years ago

4.19.0

2 years ago

4.18.0

2 years ago

4.14.0

2 years ago

4.17.0

2 years ago

4.13.0

2 years ago

4.16.0

2 years ago

4.15.0

2 years ago

4.12.0

2 years ago

4.12.1

2 years ago

4.12.2

2 years ago

4.11.1

2 years ago

4.9.0

2 years ago

4.10.1

2 years ago

4.10.2

2 years ago

4.10.0

2 years ago

4.8.0

2 years ago

4.7.0

2 years ago

4.11.0

2 years ago

4.6.0

2 years ago

4.4.0

3 years ago

4.2.5

3 years ago

4.2.4

3 years ago

4.2.7

3 years ago

4.2.6

3 years ago

4.2.8

3 years ago

4.5.0

3 years ago

4.5.2

3 years ago

4.5.1

3 years ago

4.3.0

3 years ago

4.2.3

3 years ago

4.2.2

3 years ago

4.2.1

3 years ago

4.2.0

3 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.2

4 years ago

4.1.0

3 years ago

3.15.0

4 years ago

3.16.0

4 years ago

3.14.3

4 years ago

3.14.2

4 years ago

3.14.1

4 years ago

3.14.0

4 years ago

3.13.2

5 years ago

3.13.1

5 years ago

3.13.0

5 years ago

3.12.0

5 years ago

3.11.0

5 years ago

3.10.0

5 years ago

3.9.0

5 years ago

3.8.0

5 years ago

3.7.0

5 years ago

3.6.2

5 years ago

3.6.3

5 years ago

3.6.1

5 years ago

3.6.0

5 years ago

3.5.0

5 years ago

3.4.2

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.0

5 years ago

3.2.0

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.5.0

5 years ago

2.4.0

5 years ago

2.3.1

5 years ago

2.3.0

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.1

6 years ago

0.6.0

6 years ago

0.5.8

6 years ago

0.5.7

6 years ago

0.5.6

6 years ago

0.5.5

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.7

7 years ago

0.3.6

7 years ago

0.3.5

7 years ago

0.3.4

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago