当前位置: 首页 > news >正文

JS(react)图片压缩+图片上传

上传dome

                     var fileNodeTakeStock: any = createRef();<inputref={fileNodeTakeStock}onChange={showPictureTakeStock}style={{ display: "none" }}id="fileInpBtn"type="file"accept="image/*"  //限制上传格式multiple={false}capture="environment" //ios有效调用后置摄像头,use后置/><divclassName={style.upImg}onClick={() => onOpenFileChooserTakeStock()}>点击上传</div>

上传文件

  /** 触发上传 */const onOpenFileChooserTakeStock = () => {if (!!fileNodeTakeStock) fileNodeTakeStock.current.click();};/**上传图片*/const showPictureTakeStock = (e: any) => {getImg(e.target, 0.7).then(({ data, file }) => {const formData = new FormData();let data2 = dataURLtoFile(data);let fileFormat = convertBlobToFile(data2);console.log("文件大小", (file as any).size, fileFormat.size,'base64大小',getImgSize(data));//如果原图小于压缩后的就长传压缩图if (fileFormat.size < (file as any).size) {formData.append("file", fileFormat);} else {formData.append("file", file);}uploadImgFile(formData).then((res) => {if (res?.statusCode === NetState.Ok) {const newRecord = {name: res.data.FrName,filePath: res.data.FrPath,};setImgList((e) => [...e, newRecord]);} else {return Promise.reject(res?.message || "上传失败\n网络出错");}}).catch((error) => {Toast.show(error?.message || "上传失败\n网络出错");});});};/**base64字符串转为blob对象 */const dataURLtoFile = (base64: any) => {let binary = atob(base64.split(",")[1]);let array = [];for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], {type: "image/png",});};/**blob对象转为file对象 */const convertBlobToFile = (blob: any) => {// 创建File对象const file = new File([blob], "test.jpg", { type: blob.type });return file;};// base64图片大小const getImgSize = (base64url: any) => {//获取base64图片大小,var str = base64url.replace("data:image/jpeg;base64,", ""); //这里根据自己上传图片的格式进行相应修改var strLength: any = str.length;// base64编码方式,计算// 计算后得到的文件流大小,单位为字节//理解一下base64的编码方式,是把3个8字节编码成4个6字节,到这一步字节数是不变的//但它还要在6个字节添加两个高位组成4个8字节,base64有多少个8字节,就比原来多2倍的多少个8字节,//也就是base64长度要比原码长度多了(base64长度/8)*2个字节,换算过来就是要减掉var fileLength = parseInt((strLength - (strLength / 8) * 2).toString());// 由字节转换为Kbvar size = "";size = (fileLength / 1024).toFixed(2);return parseInt(size);};

压缩图片

getImg(imgFile,quality=0.92) {return new Promise((resolve) => {const file = imgFile.files[0];const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {const image = new Image(); // 新建一个img标签(还没嵌入DOM节点)image.src = e.target.result;image.onload = function () {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');const imageWidth = image.width / 2;const imageHeight = image.height / 2;canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(image, 0, 0, imageWidth, imageHeight);//'image/jpeg':图片格式,默认为 image/png,可以是其他image/jpeg等//quality:0到1之间的取值,主要用来选定图片的质量,默认值是0.92,超出范围也会选择默认值const data = canvas.toDataURL('image/jpeg',quality);//data-压缩后base64,后面转blob对象, file-源文件resolve({ data, file });};};});
}

在这里插入图片描述

相关文章:

JS(react)图片压缩+图片上传

上传dome var fileNodeTakeStock: any createRef();<inputref{fileNodeTakeStock}onChange{showPictureTakeStock}style{{ display: "none" }}id"fileInpBtn"type"file"accept"image/*" //限制上传格式multiple{false}capture&qu…...

WPF DispatcherTimer用法

System.Windows.Threading.DispatcherTimer 类主要用于WPF应用程序中进行周期性任务调度&#xff0c;并且保证这些任务在UI线程上执行。 这对于需要更新界面或与UI元素交互的定时操作非常有用&#xff0c;因为WPF的所有UI操作都必须在主线程&#xff08;即Dispatcher线程&…...

【网络安全实验】snort实现高级IDS

注&#xff1a;本实验分别使用kali和CentOS6.8进行测试&#xff0c;可惜的是使用kali进行实验过程中遇到了困难&#xff0c;未能完成完整实验&#xff0c;而使用CentOS6.8成功完成了完整实验。 实验中用到的软件&#xff1a; https://download.csdn.net/download/weixin_5255…...

19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

layout/ability_main.xml 显示位置不对&#xff1a;检查布局文件ohos:lef_of "id:tuzi",比如显示在兔子的左侧&#xff0c;这里就会显示不对。 需要id前没有$符号。改为&#xff1a; ohos:lef_of "$id:tuzi" <?xml version"1.0" encodi…...

玩家笔记:幻兽帕鲁搭建服务器开服教程

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…...

Liunx基本指令

目录 1、ls 列出当前路径下的文件 2、pwd 打印当前工作目录 (print working directory) 3、cd 进入路径 4、mkdir 创建文件夹(make dirctory) 5、touch 创建文件 6、cp 复制(copy) 7、mv 移动/剪切、重命名 8、rm 删除 (remover) 9、vim 文本编辑器 10、cat 打开文件…...

面试题:Redis 分布式锁存在什么问题 ?如何解决 ?

文章目录 如何实现分布式锁2. Redis 分布式锁存在什么问题2.1 解决死锁问题2.2 解决锁误删问题 如何实现分布式锁 Redis 天生就可以作为一个分布式系统来使用&#xff0c;所以它实现的锁都是分布式锁。 Redis 可以通过 setnx&#xff08;set if not exists&#xff09;命令实…...

Container 命令ctr、crictl 命令

1、 Containerd和Docker的架构区别 Docker vs. Containerd&#xff1a; 2、ctr & crictl的区别 ctr是containerd的一个客户端工具 crictl 是 CRI 兼容的容器运行时命令行接口&#xff0c;可以使用它来检查和调试 Kubernetes 节点上的容器运行时和应用程序 crictl 则直接对…...

设计模式——七大原则

​更多内容&#xff0c;前往 IT-BLOG ​设计模式的目的是为了让程序&#xff0c;具有更好的代码重用性、可读性&#xff08;编程规范性&#xff0c;便于后期维护和理解&#xff09;、可扩展性&#xff08;当需要增加新需求时&#xff0c;非常方便&#xff09;、可靠性&#xf…...

笔记本电脑的WIFI模块,突然不显示了,网络也连接不上

问题复现&#xff1a; 早上&#xff0c;在更新完笔记本电脑的系统之后&#xff0c;连网之后&#xff0c;网络突然直接断开&#xff0c;一查看&#xff0c;WiFi模块居然不见了&#xff0c;开机重启也是如此&#xff0c;这种情况常常出现在更新系统之后&#xff0c;WiFi模块驱动就…...

Pytest 与allure测试报告集成

通过Feature, story, step 记录测试的功能&#xff0c;场景及测试步骤 # login.pylogin_func函数 传入参数是name 和 password 当输入的name和password与数据库db_data中数据一致时&#xff0c;返回“XXX成功登录系统&#xff01;” 当输入的name存在于数据库db_data但密码不正…...

MySQL 表的增删改查(基础)

1.CRUD 注释:在SQL中可以使用"--空格描述"来表示注释说明 CRUD 即增加(Create).查询(Retrieve).更新(Update).删除(Delete) 2.新增(Create) insert into 表名 values (列,列...); insert into 表名(列名,列名...) values (列,列...); insert into 表名 values(),(),…...

【PDF.js】发票PDF不显示文本的问题

控制台提示警告&#xff1a; Warning: loadFont - translateFont failed: "UnknownErrorException: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.".…...

C#中检查空值的最佳实践

C#中检查空值的最佳实践 在C#编程中&#xff0c;处理空值是一项基础且重要的任务。正确地检查变量是否为null可以帮助我们避免NullReferenceException&#xff0c;这是C#最常见的运行时错误之一。本文将探讨为什么使用is关键字进行空值检查是一种优于使用的做法。 操作符&…...

三层交换组网实验(华为)

思科设备参考&#xff1a;三层交换组网实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 三层交换技术的出现&#xff0c;解决子网必须依赖路由器进行管理的问题&#xff0c;解决传统路由器低速、复杂所造成的网络瓶颈问题。一个具有三层交换功能的设备可简单理解为…...

Android配置GitLab CI/CD持续集成,Shell版本的gitlab-runner,FastLane执行,上传蒲公英

mac环境下&#xff0c; 首选需要安装gitlab-runner和fastlane brew install gitlab-runner brew install fastlane 安装完成&#xff0c;来到我们在gitlab下新建的Android项目&#xff0c;我们开始创建gitlab-runner 1、创建runner 点开runner&#xff0c;点击新建runner …...

算法提升——LeetCode383场周赛总结

周赛题目 边界上的蚂蚁 边界上有一只蚂蚁&#xff0c;它有时向左走&#xff0c;有时向右走。 给你一个非零整数数组nums。蚂蚁会按顺序读取nums中的元素&#xff0c;从第一个元素开始直到结束。每一步&#xff0c;蚂蚁会根据当前元素的值移动&#xff1a; 如果nums[i]<0…...

(delphi11最新学习资料) Object Pascal 学习笔记---第4章第2.1节( 带结果的Exit例程)

4.2.1 带结果的Exit例程 ​ 我们已经看到&#xff0c;从函数中返回结果所使用的语法与 C 语言家族的语法截然不同。不仅语法不同&#xff0c;行为也不同。为结果&#xff08;或函数名&#xff09;赋值并不像return语句那样终止函数。Object Pascal 开发人员经常利用这一特性&a…...

vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function

问题 今天有个项目在打包的时候遇到了一个问题&#xff0c;就是执行 npm run build 命令的时候报错了&#xff0c;如下&#xff1a; 解决 我排查了一下&#xff0c;模拟代码如下&#xff1a;在打包的时候用了 MinChunkSizePlugin const webpack require("webpack"…...

【Java 数据结构】对象的比较

Java中对象的比较 1. PriorityQueue中插入对象2. 元素的比较2.1 基本类型的比较2.2 对象比较的问题 3. 对象的比较3.1 覆写基类的equals3.2 基于Comparble接口类的比较3.3 基于比较器比较3.4 三种方式对比 4. 集合框架中PriorityQueue的比较方式5. 使用PriorityQueue创建大小堆…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...