图片上传裁剪react-cropper
效果图

安装插件
npm i react-cropper
或者
yarn add react-cropper
主要代码
import React, { useRef, useState } from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import './index.less';
import { UploadOutlined } from '@ant-design/icons';
import { Upload, Button, Space, Divider } from 'antd';function cropper() {const cropperRef = useRef(null);const [imgsrc, setImgsrc] = useState(null); // 裁剪好的imgsrcconst [image, setImage] = useState("https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"); // 记录图片const handleCrop = () => {const imageElement: any = cropperRef?.current;const cropper: any = imageElement?.cropper;const back64Cropper = cropper.getCroppedCanvas().toDataURL();console.log(cropper.getCroppedCanvas().toDataURL("image/jpeg"), "裁剪的base64编码");const base64Data = back64Cropper; // base64 格式的图像数据const url = base64ToUrl(base64Data); // 转换为 URLconsole.log("剪切url=", url); // 输出 URLsetImgsrc(url);};function base64ToUrl(base64Data: any) {const blob = base64ToBlob(base64Data); // 将 base64 转为 Blobconst url = URL.createObjectURL(blob); // 生成 URLreturn url;}function base64ToBlob(base64Data: any) {const byteString = atob(base64Data.split(',')[1]); // 将 base64 的数据部分解码成二进制数据const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; // 获取 MIME 类型const ab = new ArrayBuffer(byteString.length);const ia = new Uint8Array(ab);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ab], { type: mimeString }); // 生成 Blob 对象}const replaceImg = (img) => {console.log(img.file, "img");// 通过FileReader读取用户选取的文件const reader = new FileReader();reader.readAsDataURL(img.file.originFileObj);//加载图片后获取到图片的base64格式reader.onload = ({ target: { result } = {} }) => {console.log(result, "base64");//更新替换为目标图片setImage(result);};return false;};return (<div className='copy'><Cropperref={cropperRef}// 你所需要剪切图片的路径src={image}// 设置其他相关参数,例如裁剪框宽高比、裁剪框移动限制等style={{ height: 400, width: '100%' }}// 裁剪比例aspectRatio={16 / 9}/><div className='copy-but'><Space><Upload fileList={[]} onChange={replaceImg} accept="image/*"><Button size='large' className="upload" icon={<UploadOutlined />}>选择图片</Button></Upload><Button size='large' className="button" type="primary" onClick={handleCrop}>确定裁剪</Button></Space></div><div className='copy-img'><Divider plain>裁剪好的图片</Divider><div style={{ minHeight: "300px", minWidth: "500px", border: "1px solid #ccc", display: "flex", justifyContent: "center", alignItems: "center"}}><img src={imgsrc} alt="" /></div></div></div>)
}export default cropper
相关文章:
图片上传裁剪react-cropper
效果图 安装插件 npm i react-cropper 或者 yarn add react-cropper 主要代码 import React, { useRef, useState } from react; import Cropper from react-cropper; import cropperjs/dist/cropper.css; import ./index.less; import { UploadOutlined } from ant-d…...
跨越空间的编码:在PyCharm中高效使用远程解释器
跨越空间的编码:在PyCharm中高效使用远程解释器 PyCharm的强大功能之一是支持远程解释器,这使得开发者能够在远程服务器或虚拟机上运行、调试代码,享受本地开发环境的便利。本文将详细介绍如何在PyCharm中配置和使用远程解释器,包…...
Vue3单文件jsx输出多组件示例遇到的坑
感谢博主减肥吧Evan提供的SFC实现多组件的思路和实现,小卷在大佬的基础上再完善下实现。 我们从tsx的API使用上得到启发,可以在vue的单文件组件(sfc)中使用defineComponent来定义和导出多个独立的小组件。此时sfc中的<templat…...
OpenCV中的轮廓检测cv2.findContours()
文章目录 前言一、查找轮廓二、绘制轮廓轮廓面积轮廓周长 前言 轮廓提取的前提,将背景置为黑色,目标为白色(利用二值化或Canny) 边缘检测,例如Canny等,利用梯度变化,记录图像中的边缘像素点&a…...
JFlash读取和烧录加密stm32程序
JFlash读取和烧录加密stm32程序 安装后JFlash所在的目录:C:\Program Files\SEGGER\JLink 一、烧写加密程序 1、打开C:\Program Files\SEGGER\JLink目录,找到JFlash.exe,双击它,就可以打开该执行程序。见下图: 2、选择“Create …...
【总结】实际业务场景中锁、事务、异常如何考虑使用?
文章目录 锁处理目的:考虑锁控制思路:生命周期接口并发控制解决方案:测试锁是否生效:模拟多线程并发场景的2种方式: 事务处理目的:考虑事务控制思路:解决方案: 总结 锁处理 目的&am…...
Pytorch使用Dataset加载数据
1、前言: 在阅读之前,需要配置好对应pytorch版本。 对于一般学习,使用cpu版本的即可。参考教程点我 导入pytorch包,使用如下命令即可。 import torch # 注意虽然叫pytorch,但是在引用时是引用torch2、神经网络获取…...
【nginx】nginx的优点
目录 一、高性能1.1 高并发处理1.2 低内存消耗1.3 快速响应 二、高扩展性2.1 模块化设计2.2 动态模块扩展 三、高可靠性3.1 核心框架稳定3.2 进程管理3.3 负载均衡与健康检查3.4 热部署 四、功能丰富4.1 反向代理4.2 HTTP缓存4.3 安全功能 五、易于配置和管理5.1 配置文件简单5…...
K8S ingress 初体验 - ingress-ngnix 的安装与使用
准备环境 先把 google 的vm 跑起来… gatemanMoreFine-S500:~/projects/coding/k8s-s/service-case/cloud-user$ kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-master Ready control-plane,master 124d v1.23.6 k8s-no…...
qt 获取父控件
在 Qt 中,你可以通过调用 QWidget 的 parentWidget() 方法来获取一个控件的父控件。这个方法会返回一个指向父控件的指针,如果该控件没有父控件,则返回 nullptr。 以下是一个简单的示例,展示了如何获取一个按钮的父控件ÿ…...
flask基础配置详情
前言 一个简单的应用 app Flask(__name__) app.route("/") def hello_world():return "<p>Hello,World!"运行Flask应用 #flask命令运行flask --app hello run#使用Python命令进行运行python -m flask # 作为一个捷径,如果文件名为 app…...
单相整流-TI视频课笔记
目录 1、单相半波整流 1.1、单相半波----电容滤波---超轻负载 1.2、单相半波----电容滤波---轻负载 1.3、单相半波----电容滤波---重负载 2、全波整流 2.1、全波整流的仿真 2.2、半波与全波滤波的对比 3、全桥整流电路 3.1、全波和全桥整流对比 3.2、半波全波和全桥…...
用GPT 4o提高效率
**GPT-4o可以通过提高编程效率、优化工作流程、增强文档管理和知识分享等多方面帮助用户提升工作效率**。具体如下: 1. **代码生成与优化** - **快速原型开发**:程序员可以通过向GPT-4o描述需求或功能来生成初步的代码框架或关键函数,从而节省…...
20240711每日消息队列-------------MQ消息的积压的折磨
目标 解决MQ消息的积压 背景 菜馆系统----------- 系统读取消息,处理业务逻辑,持久化订单和菜品数据,然后将其显示在菜品管理客户端上。 最初我们的用户基数很小,上线后的一段时间内,MQ消息通信还算顺利。 随着用户…...
推荐一个比 Jenkins 使用更简单的项目构建和部署工具
最近发现了一个比 Jenkins 使用更简单的项目构建和部署工具,完全可以满足个人以及一些小企业的需求,分享一下。 项目介绍 Jpom 是一款 Java 开发的简单轻量的低侵入式在线构建、自动部署、日常运维、项目监控软件。 日常开发中,Jpom 可以解…...
java 在pdf中根据关键字位置插入图片(公章、签名等)
java 在pdf中根据关键字位置插入图片(公章、签名等) 1.使用依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.1.12</version><type>pom</type>…...
施耐德EOCR系列电机保护器全面升级后無端子型
一、施耐德数码型产品升级背景 施耐德电气作为一家全球领先的能源管理和自动化解决方案提供商,其产品线包括各种电动机保护器等数码型产品。随着技术的不断发展和市场需求的变化,施耐德会对其产品进行定期升级和优化。在升级过程中,产品的设…...
27.数码管的驱动,使用74HC595移位寄存器芯片
PS:升腾A7pro系列FPGA没有数码管外设,因此以AC620FPGA为例展开实验。 (1)共阳极数码管和共阴极数码管示意图: AC620中的数码管属于共阳极数码管,段选端口(dp,g,f,e,d,c,b,a)低电平即可点亮led。人眼的视觉…...
TCP/IP 原理、实现方式与优缺点
TCP/IP(传输控制协议/网际协议) 是互联网的核心协议套件,主要用于在不同计算机之间进行通信。它包括多个层次的协议,每层协议负责不同的功能。TCP/IP 的四个层次模型如下: 网络接口层:负责在特定的物理网络…...
利率债与信用债的区别及其与债券型基金的关系
利率债与信用债的定义及其区别 定义 利率债: 定义:利率债是指由主权或类主权主体(如中华人民共和国财政部、国家开发银行等)发行的债券。这些债券通常被认为没有信用风险,因为它们由国家信用背书。特点:由…...
AI Agent如何重构咨询交付模式:从人工周级报告到秒级洞察,头部咨询公司内部流程解密
更多请点击: https://intelliparadigm.com 第一章:AI Agent如何重构咨询交付模式:从人工周级报告到秒级洞察,头部咨询公司内部流程解密 传统管理咨询项目中,一线顾问需耗时5–7天完成行业扫描、竞对分析、客户数据清洗…...
AI医疗Agent如何72小时通过NMPA二类证审批:附2024最新审评问答清单与材料模板
更多请点击: https://intelliparadigm.com 第一章:AI医疗Agent的监管合规本质与NMPA二类证核心逻辑 AI医疗Agent并非通用大模型的简单应用延伸,而是以临床决策支持、病灶识别、报告生成等具体医疗器械功能为边界的技术实体。其监管合规本质在…...
单一职责原则 登录功能重构笔记
核心定义单一职责原则:一个类只干一件事,只有一个修改的理由,避免功能杂糅、代码耦合。原有问题原始 Login 登录类,把界面展示、数据库连接、数据查询、登录校验、程序启动全部堆在一个类里,职责混乱,任何小…...
潜变量扩散模型原理解析:从宝可梦生成看LDM工程落地
1. 项目概述:用宝可梦讲清楚潜变量扩散模型,不是比喻游戏,是真能跑通的原理复现你有没有试过让AI画一只“皮卡丘和喷火龙杂交出来的电火属性神兽”?不是简单拼贴,而是真正理解“电系的毛发质感火系的鳞片过渡神兽级别的…...
ARM嵌入式C#开发实战:基于SkiaSharp的低延迟GUI实现
1. 这不是玩具,是ARM嵌入式系统能力的“压力测试仪”很多人第一次听说“在ARM开发板上跑C#游戏”,第一反应是:这能行?C#不是Windows桌面和服务器的语言吗?Mono?.NET Core?ARM板子连图形驱动都配…...
【滤波跟踪】基于EKF的视觉-惯性里程计(VIO)与KAZE特征匹配技术,通过摄像头和IMU数据来估计无人机的位置附Matlab代码
✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。🍎完整代码获取 定制创新 论文复现点击:Matlab科研工作室👇 关注我领取海量matlab电子书和数学建模资料 dz…...
别再让‘自己’说话了:用ZEGO SDK搞定RTC通话中的回声消除(附实战避坑清单)
从工单到解决方案:ZEGO SDK回声消除实战指南 1. 回声问题排查:从用户反馈到技术定位 "为什么每次通话对方都能听到自己的声音?"——这是开发者后台最常见的一类工单。不同于理论探讨,真实场景中的回声问题往往伴随着模糊…...
HsMod深度解析:基于BepInEx的炉石传说全方位模改进阶指南
HsMod深度解析:基于BepInEx的炉石传说全方位模改进阶指南 【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod 你是否厌倦了炉石传说中繁琐的动画等待?是否渴望更高效的游…...
紧急!2024年Q2最新:Claude 3.5 Sonnet对LaTeX/Markdown混合文档的支持边界实测报告(附绕过限制的3种军工级方案)
更多请点击: https://kaifayun.com 第一章:Claude 3.5 Sonnet对LaTeX/Markdown混合文档的原生支持能力全景评估 Claude 3.5 Sonnet 在处理 LaTeX 与 Markdown 混合文档时展现出显著增强的解析鲁棒性与语义理解深度,尤其在数学公式嵌入、交叉…...
让薪酬跟着人才走:国企核心人才激励保留的五个管理命题
当前,国有企业三项制度改革已进入攻坚深化期。劳动合同签订率、岗位说明书覆盖率、绩效考核实施率等量化指标普遍处于高位,制度框架的“四梁八柱”已基本确立。但在改革向纵深推进过程中,核心人才流失问题却时有发生。据调研反映,…...
