首页 > 其他分享 >2024-04-28 记录antd-img-crop参数设置

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

时间:2024-04-28 23:23:23浏览次数:26  
标签:string img crop 弹窗 antd 裁切 参数设置 04

前言:以前在做富文本编辑的时候,关于图片裁剪部分使用了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

相关文章

  • 04-vue项目相关
    #1工程化---》创建vue项目 -要按vue要求的套路写代码--》写的都是vue的东西-最终上线--》要编译---》把vue的代码--》编译成html,css,js-创建工程,编译需要使用:nodejs--》webpack#2安装node环境 -官网下载一路下一步安装-两个命令 npm---->pip......
  • Ubuntu 20.04 美化记录自用
    终端美化略,这个当时没有记录,现在也不太记得了,悲。大体安装如下:zshoh_my_zsh然后修改默认配色成果如下:桌面美化由于ubuntu20.04默认安装的是GONME3的桌面环境,所以之后的所有美化都是基于此的,我也嫌麻烦没有更换其他桌面,如kde。首先安装美化插件:gnome-tweak-tool:美......
  • Ubuntu22.04 搭建Kubernetes 1.28版本集群
    依赖安装准备工作需要在所有节点上进行。安装ssh服务安装 openssh-serversudoapt-getinstallopenssh-server修改配置文件vim/etc/ssh/sshd_config找到配置项LoginGraceTime120PermitRootLoginprohibit-passwordStrictModesyes把 prohibit-password ......
  • 20240428
    我大抵是病了吧。本来应该昨天写的,但是昨天颓废去了没来得及写。下文的内容可能有些hentai(或者说不正常),如有不适请立即退出。我前天晚上做了一个梦。梦很短(感觉是吧),发生了什么也记不太清了。但是有几个要素我还是记得的:场景是在hf校门口,我自己还是个女的(汗)。(为什么我在......
  • MUR1040D-ASEMI超逆变器专用MUR1040D
    编辑:llMUR1040D-ASEMI超逆变器专用MUR1040D型号:MUR1040D品牌:ASEMI封装:TO-252正向电流(IF):10A反向电压(VRRM):400V正向电压(VF):1.30V工作温度:-55°C~150°C反向恢复时间:5ns芯片个数:1芯片尺寸:86mil引脚数量:4浪涌电流(IFMS):100A包装方式:50/管1000/盘3000/箱MUR1040D特性参数......
  • [Over-Distance] Ubuntu 24.04 LTS Update
    Ubuntu24.04LTS更新内容(简体中文)Ubuntu24.04LTS,代号NobleNumbat,带来了一系列引人注目的更新与改进。以下是详细的更新内容列举:一、内核与系统性能优化Ubuntu24.04LTS搭载了Linux6.8LTS内核版本,带来了显著的性能提升:笔记本电脑硬件兼容性增强,使得系统在各种笔记本平......
  • VS和jetbrains比较容易忘记的几个快捷键(更新至20230428)
    //PS:这几个是我经常忘记的,记录一下,//         暂时只记录用到的,其他的用到后再去补充添加,后面会陆续补充。 VS2022Ctrl+T :在所有代码里面搜索的快捷键,(不是Ctrl+Q)快速搜索并定位文件名称的快捷:在当前文件快速搜索函数名称的快捷键: JetBrains在所有......
  • 【2024-04-26】新的启程
    20:00不要只想着成功,你越想成功,就越容易失败。成功就像幸福一样,可遇而不可求。它是一种自然而然的产物,是一个人无意识地投身于某一伟大的事业时产生的衍生品,或者是为他人奉献时的副产品。幸福总会降临的,成功也同样:常常是无心插柳柳成荫。            ......
  • 20240427打卡-02构建之法阅读笔记之一
    在一个团队里,每个人的代码风格不一样,并且每个人负责不同的模块,而最后整合的时候就会出现困难,明明在自己的电脑上可以运行,但为什么到别人的电脑上就会报错,就好比这次团队作业的一个功能,一个人实现了图片的上传功能,但是在别人的电脑里无论如何也实现不了。如何能让自己负责的模块功......
  • 24/04/27 图论及 dfs 序相关
    \(\color{green}(1)\)CF721CJourney给定一张\(n\)个点\(m\)条边的有向无环图,边有边权。构造一条\(1\ton\)的路径使得其边权和\(\lek\)且经过的点数最多。\(n,m\le5\times10^3\),\(k\le10^9\)。最简单的想法是设状态\(f_{i,j}\)表示\(1\toi\)的边权......