2024-04-28 记录antd-img-crop参数设置

前言：以前在做富文本编辑的时候，关于图片裁剪部分使用了antd-img-crop，忘了还有那些可使用的参数，现在上网查找并记录下来吧。

antd-img-crop：一个图片裁剪插件，用于包装antd组件库中的upload组件。

其官网地址在此：https://github.com/nanxiaobei/antd-img-crop

安装：

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>

);

以下是使用参数：

属性	类型	默认	说明
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，弹窗将不会打开

我一般只需要设置裁剪的比例，那么使用参数aspect={0.526}即可。

最后如果需要更多内容，还是推荐大家去其官网看吧，溜了。