前言:以前在做富文本编辑的时候,关于图片裁剪部分使用了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}即可。
最后如果需要更多内容,还是推荐大家去其官网看吧,溜了。
标签:string,img,crop,弹窗,antd,裁切,参数设置,04 From: https://www.cnblogs.com/iuniko/p/18164734