vue 前端等比例压缩图片(再转换成文件后上传后端)

前端压缩图片总的来说还是转base64 然后等比例放小宽和高  这个是上次压缩图片的一个扩展

压缩完之后 再将base64 转成blob再转成文件然后再上传  一生要强的前端崽子(后端不支持base64上传) 自己改吧改吧

 // 图片上传async changePic(e) {this.isshangchuantupian=truethis.$message.warning('图片资源正在压缩...')// 获取图片数据  var file = e.target.files[0];var reader = new FileReader();reader.readAsDataURL(file);let ctempfilelet _that = thisreader.onload = await function (event) {// 压缩图片  var img = new Image();img.src = event.target.result;img.onload = function () {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var width = img.widthvar height = img.heightif (Math.max(width, height) > _that.maximg) {if (width > height) {canvas.width = _that.maximg;canvas.height = _that.maximg * height / width} else {canvas.height = _that.maximgcanvas.width = _that.maximg * width / height}} else {canvas.width = width;canvas.height = height;}ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据  var blob = dataURLToBlob(dataUrl); // 将压缩后的图片数据转换为Blob对象  ctempfile = new File([blob], file.name, { type: 'image/jpeg' }); // 将Blob对象封装为File对象  //console.log(ctempfile)let formData = new FormData()// for (let i = 0; i < fileList.length; i++) {//formData.append('xxxx', fileList[i])//}formData.append('update_image', ctempfile)http.post('服务器地址', formData).then(res => {//console.log(res.data.update_image)if (res.data.xxxx) {_that.isshangchuantupian=false} else {_that.$message({message: '图片上传失败:',type: 'error'})}}).catch(err => {console.log(err)})};};// 将Base64编码的图片数据转换为Blob对象  function dataURLToBlob(dataUrl) {var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}//let fileList = e.target.files},

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

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

相关文章

【Docker】Docker基础

文章目录 安装使用帮助启动命令镜像命令容器命令 安装 # 卸载旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 设置存储库 sudo yum install -y yum-utils …

关于git使用的tips

前言 这里是一些git指令使用的tips&#xff0c;如果你作为初学者的话&#xff0c;我认为它将对你有所帮助。 常见指令 常见问题处理 1、使用git clone下载【huggingface.co】资源超时或无法请求问题 绝大多数情况是网络问题&#xff0c;首先如果是比较大的资源&#xff0c;你需…

数据库:如何取消mysql的密码

因为调试MySQL数据接口&#xff0c;总是需要输入密码很烦&#xff0c;所以决定取消mysql的root密码&#xff0c; 网上推荐的有两种方法&#xff1a; 1、mysql命令 SET PASSWORD FOR rootlocalhostPASSWORD(); 2、运行 mysqladmin 命令 mysqladmin -u root -p password …

C# 错误: 集合已修改,可能无法执行枚举操作

出错原因是使用了RemoveAt()函数移除了数据中的某一个数&#xff0c;导致数据发生了错位&#xff08;参考链接一&#xff09; 解决方案&#xff1a; 第一种解决方法&#xff1a;使用for循环 第二种解决方法&#xff1a;调用ToArray()方法&#xff0c;然后再进行foreach循环 …

vue设置height:100vh导致页面超出屏幕可以上下滑动

刚开始设置的height:100vh&#xff0c;就会出现如图的效果&#xff0c;会出现上下滚动 <template><view class"container">......</view> </template><style lang"scss">.container {height: 100vh;} </style> 解决方…

精确掌控并发:分布式环境下并发流量控制的设计与实现(一)

这是《百图解码支付系统设计与实现》专栏系列文章中的第&#xff08;10&#xff09;篇。 本篇主要讲清楚常用的并发流量控制方案&#xff0c;包括固定窗口、滑动窗口、漏桶、令牌桶、分布式消息中间件等&#xff0c;以及各种方案在支付系统不同场景下的应用。 在非支付场景&a…

故事机手机平板等智能硬件DVT阶段可靠性测试方法

DVT是什么 DVT是设计样品验证测试评审阶段&#xff0c;这个阶段要进行全面的&#xff0c;客观的测试&#xff0c; 主要测试项目包括&#xff1a;功能测试&#xff0c;安规测试&#xff0c;性能测试&#xff0c;合规测试&#xff08;兼容性&#xff09;&#xff0c;机械测试&am…

QT上位机开发(树形控件在地图软件中的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 树形控件还是非常有用的&#xff0c;比如在选择文件的时候、选择目录的时候、以及选择同类型数据中某一个特定选项的时候。当然&#xff0c;对于ca…

JVM工作原理与实战(十一):双亲委派机制

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、双亲委派机制 1.双亲委派机制详解 2.父类加载器 3.双亲委派机制的主要作用 二、双亲委派机制常见问题 总结 前言 ​JVM作为Java程序的运行环境&#xff0c;其负责解释和执行字…

STM32的FMC独立管理和控制外部存储器

在STM32中&#xff0c;FMC&#xff08;Flexible Memory Controller&#xff09;是一个功能强大的外部存储器控制器&#xff0c;用于管理和控制外部存储器设备&#xff0c;如SRAM、SDRAM、NOR Flash等。FMC允许将多个存储器设备连接到微控制器&#xff0c;并通过不同的片选线进行…

LLM之长度外推(一)| 基于位置编码的长度外推研究综述

论文&#xff1a;Length Extrapolation of Transformers: A Survey from the Perspective of Position Encoding地址&#xff1a;https://arxiv.org/abs/2312.17044 Transformer自诞生以来就席卷了NLP领域&#xff0c;因为它具有对序列中复杂依赖关系进行建模的优越能力。尽管基…

001 Golang-channel-practice

最近在练习并发编程。加上最近也在用Golang写代码&#xff0c;所以记录一下练习的题目。 第一道题目是用10个协程打印100条信息&#xff0c;创建10个协程。每个协程都会有自己的编号。每个协程都会被打印10次。 package mainimport ("fmt""strconv" )func …

1-07基本数据类型

一、概述 C语言的基本数据类型&#xff08;也叫内置数据类型&#xff09;在日常编程中被频繁使用&#xff0c;本章我们主要简单地介绍下 C 语言的基本数据类型。 基本数据类型主要包括&#xff1a;整数类型&#xff0c;浮点数类型和字符类型&#xff0c;其中字符类型也可以看…

gradient_checkpointing

点评&#xff1a;本质是减少内存消耗的一种方式&#xff0c;以时间或者计算换内存 gradient_checkpointing&#xff08;梯度检查点&#xff09;是一种用于减少深度学习模型中内存消耗的技术。在训练深度神经网络时&#xff0c;反向传播算法需要在前向传播和反向传播之间存储中…

前端系列:正则表达式RegExp详解

文章目录 正则创建匹配方法元字符字符集合边界分组数量词汇匹配模式RegExp 方法特性 正则创建 字面量创建 const str asdf123sds3234 const regexp /\d/g const res str.match(regexp) console.log(res) //[123, 3234]构造函数 const str asdf123asad23121 const regexp n…

[②C++ Boost]: Boost库编译,arm交叉编译方法

前言 Boost是十分实用的C库&#xff0c;如果想在arm环境下使用&#xff0c;就需要自己下载源码编译&#xff0c;本篇博客就记录下Boost库的编译方法。 下载Boost源码 Boost源码的下载路径可以使用&#xff1a;https://sourceforge.net/projects/boost/files/boost/ 编译 …

408重要数据结构+算法汇总——C语言手搓版(全)

该套代码&#xff0c;大学期间跟着网课一遍一遍打下来的&#xff0c;408大概就这些了&#xff0c;别的杂七杂八其实还有很多&#xff0c;遗憾的是&#xff0c;一直没有整理和归纳。导致一遍遍地学一遍遍地忘记。大四就快毕业了&#xff0c;研也考了。这里做个整理&#xff0c;算…

JavaScript小案例

烟花 html <body><div id"box"></div><script src"./move.js"></script><script src"./fire.js"></script> </body>js代码 fire.js function Fire(){// 获取box盒子this.box document.que…

虚幻UE 材质-材质编辑器节点2

上一篇&#xff1a;虚幻UE 材质-材质编辑器节点 1 上一篇文章对材质编辑器的部分节点做了讲解和对比较常用的功能做了展示 这篇文章继续对上一篇的文章进行补充 文章目录 前言一、ReflectionVector反射向量二、Material Parameter Collection材质参数集三、TwoSideSign和Vertex…

使用 Process Explorer 和 Windbg 排查软件线程堵塞问题

目录 1、问题说明 2、线程堵塞的可能原因分析 3、使用Windbg和Process Explorer确定线程中发生了死循环 4、根据Windbg中显示的函数调用堆栈去查看源码&#xff0c;找到问题 4.1、在Windbg定位发生死循环的函数的方法 4.2、在Windbg中查看变量的值去辅助分析 4.3、是循环…