前端组件库图片上传时候做自定义裁剪操作

不论是vue还是react项目,我们在使用antd组件库做上传图片的时候,有一个上传图片裁剪的功能,但是这个功能默认是只支持1:1的裁剪操作,如何做到自定义的裁剪操作?比如显示宽高比?是否可以缩放和旋转操作?是否显示重置按钮等,其实这些在官方文档里面都有的:GitHub - nanxiaobei/antd-img-crop: 🗡 An image cropper for Ant Design Upload

只要在项目中引入:

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

比如加上3/4的尺寸限制:

<ImgCrop rotationSlider aspect={3 / 4}>

那么上传的时候就会是这样子:

 

 这个 ImgCrop属性包含如下:

属性类型默认说明
qualitynumber0.4裁切图片质量,0 到 1 之间
fillColorstring'white'裁切图像填充色
zoomSliderbooleantrue图片缩放控制
rotationSliderbooleanfalse图片旋转控制
aspectSliderbooleanfalse裁切比率控制
showResetbooleanfalse显示重置按钮,重置缩放旋转及比率
resetTextstring重置重置按钮文字
aspectnumber1 / 1裁切区域宽高比,width / height
minZoomnumber1最小缩放倍数
maxZoomnumber3最大缩放倍数
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-裁切弹窗打开前的回调,若返回 false 或 reject,弹窗将不会打开

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/9667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker容器目录挂载到主机

文章目录 一、MySQL二、Redis三、Minio四、PostgreSQL五、MongoDB六、Elasticsearch七、Nginx八、RabbitMQ九、Cassandra十、WordPress总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、MySQL 在这个例子中&#xff0c;/my/own/datadir 是你的主…

【Redis】RDB持久化和AOF 持久化

分布式缓存 单点 Redis 的问题 数据丢失&#xff08;持久化&#xff09;并发能力不如集群&#xff08;主从集群、读写分离&#xff09;Redis宕机导致服务不可用&#xff08;Redis哨兵&#xff09;存储能力差&#xff08;分片集群&#xff09; Redis 持久化 RDB 持久化 什么…

程序链接和运行 - 笔记

1 linux下程序a连接b.so后,运行时如何找到调用的函数 在Linux下,当程序A连接了动态链接库B(.so文件)后,在运行时,程序A会使用动态链接器(dynamic linker)来解析并加载动态链接库B中的函数。动态链接器会在系统中搜索动态链接库,并将它们加载到程序的地址空间中。 当…

力扣hot100:199. 二叉树的右视图/437. 路径总和 III(dfs/回溯/树上前缀和/哈希表)

文章目录 一、LeetCode&#xff1a;199. 二叉树的右视图二、LeetCode&#xff1a;437. 路径总和 III 一、LeetCode&#xff1a;199. 二叉树的右视图 LeetCode&#xff1a;199. 二叉树的右视图 差点因为是个中等题打退堂鼓。其实比较简单。 右视图实际上只需要找到&#xff0c…

python自动化生成ppt

使用Python和python-pptx创建PPT 在这篇博客中&#xff0c;我们将探讨如何使用Python库python-pptx来创建一个简单的PowerPoint演示文稿&#xff08;PPT&#xff09;。这个库允许我们以编程方式创建幻灯片、添加文本、图片、表格和自定义形状。 安装python-pptx 首先&#x…

Relaxed MemoryConsistency

SC和TSO都被称之为强&#xff08;strong&#xff09;保序模型&#xff1b; because the global memory order of each model usually respects (preserves) per-thread program order&#xff1b;回想一下&#xff0c;对于load和store的所有四种组合&#xff08;Load -> Lo…

关于OpenJDK的学习笔记

JDK对于搬砖&#xff08;此处特指做Java开发的&#xff09;的打工人来说是非常熟悉的啦&#xff0c;但是 除了Oracle公司提供的JDK&#xff08;Java Development Kit&#xff09;之外&#xff0c;还有多个其他组织提供的JDK版本&#xff0c;这些版本通常被称为OpenJDK的发行版本…

六一儿童节活动方案策划怎么写?

六一儿童节活动方案策划不难&#xff0c;一般看前人策划的案例就可以仿写一篇充满创意的儿童节活动方案。 当然&#xff0c;你也可以照着下面的模版直接写&#xff1a; 成年人的时间是离弦的箭 向着目标,一往无前 孩子的时间是旋转木马 载着今天和明天转啊转啊圈圈 成年人…

怎样防范服务器被攻击?

对于网络安全&#xff0c;我们怎样才能防范服务器被攻击呢&#xff1f; 为了避免一些恶意软件或者是攻击者利用特定的程序对服务器进行干扰和破坏的行为&#xff0c;我们需要做出以下有效的措施。 1.加强网络安全 服务器的网络安全是十分重要的&#xff0c;所以我们需要加强服…

Linux中分析日志及问题排查

可以参考:Linux命令 Linux系统日志是系统管理和故障排查的关键工具。通过分析系统日志,我们能够深入了解系统的运行状况,迅速发现并解决潜在的问题。 1. 日志文件位置 系统日志通常存储在/var/log/目录下,不同的日志有不同的文件,如下: /var/log/syslog:系统日志,包含…

【二叉树算法题记录】最大和最小深度

最大和最小深度 104.二叉树的最大深度题目描述题目分析递归法 111.二叉树的最小深度题目描述题目分析迭代法 104.二叉树的最大深度 题目描述 给定一个二叉树root&#xff0c;返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 题目分析 …

基于FPGA的视频矩阵 视频拼接 无缝切换解决方案

视频矩阵 视频矩阵 视频拼接 无缝切换 1. 最大支持144路HDMI视频输入&#xff0c;最大支持144路路HDMI输出&#xff0c;完全交叉切换。 2. 与包括1080p/60的所有HDTV分辨率和高达1920*1200的PC的分辨率兼容&#xff1b; 3. 支持HDMI 1.3a、HDCP 1.3、HDCP 1.4、以及DVI 1.0协…

教你解决PUBG绝地求生游戏中闪退掉线无法重连回去的问题

《绝地求生》&#xff08;PUBG&#xff09;&#xff0c;作为一款在全球范围内掀起热潮的战术竞技游戏&#xff0c;以其栩栩如生的战场环境和令人心跳加速的生存冒险博得了广大玩家的青睐。然而&#xff0c;一些玩家在经历了一场惊心动魄的对局后&#xff0c;却面临了一个不大不…

django显示网页步骤

显示网页步骤 小白的django学习笔记 2024/5/6 8:30 文章目录 显示网页步骤创建输入框&#xff08;文本、单选、多选&#xff09;效果如何在django中显示网页写函数配置地址运行&#xff0c;要选择这个工程名的&#xff0c;使用socket复制ip&#xff0c;后面在加上名字,成功&…

Nextcloud私有云盘-重新定义云存储体验

Nextcloud私有云盘-重新定义云存储体验 1. 什么是Nextcloud ​ Nextcloud是一个开源的云存储和协作平台&#xff0c;旨在为个人用户、企业和团队提供安全、隐私保护的数据存储和共享解决方案。它允许您在不同设备之间同步、共享文件&#xff0c;提供了强大的协作工具和应用生…

数据库入门(sql文档+命令行)

一.基础知识 1.SQL&#xff08;Structured Query Language&#xff09;结构化查询语言分类&#xff1a; DDL数据定义语言用来定义数据库对象&#xff1a;数据库、表、字段DML数据操作语言对数据库进行增删改查DQL数据查询语言查询数据库中表的信息DCL数据控制语言用来创建数据…

服务器托管与租赁的有什么区别

服务器作为企业数据存储、应用部署的重要工具&#xff0c;其选择方式多种多样。其中&#xff0c;服务器托管和租赁是两种常见的形式。 在选择服务器时&#xff0c;很多企业会面临一个问题&#xff1a;是选择托管服务还是租赁服务器&#xff1f; 一、什么是服务器租用和服务器托…

为什么公司宁愿花15k去重招一个应届生,也不愿意加薪5k留住老程序员?

大家从人心的角度&#xff0c;应该就可以理解&#xff0c;再进一步&#xff0c;如果从人性的角度&#xff0c;更能看清有些老板说话和处事的动机。 1 如果老板觉得没必要招新的程序员&#xff0c;比如老板自己能干&#xff0c;或者活多了&#xff0c;但能用现有的人能干好&…

鸿蒙——即将是国内全部物联网的搭载系统

国内物联网时代 中国国内物联网时代是指在中国国内&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;技术得到广泛应用和发展的时代。在这个时代&#xff0c;各种设备和物品都可以通过互联网进行连接和交互&#xff0c;实现信息的采集、传输和…

【SpringBoot整合系列】SpringBoot整合RabbitMQ-消息可靠性

目录 确保消息的可靠性RabbitMQ 消息发送可靠性分析解决方案开启事务机制发送方确认机制单条消息处理消息批量处理 失败重试自带重试机制业务重试 RabbitMQ 消息消费可靠性如何保证消息在队列RabbitMQ 的消息消费&#xff0c;整体上来说有两种不同的思路&#xff1a;确保消费成…