vue图片压缩不失真_vue中实现图片压缩 file文件的方法
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下。(我已经拿到上传的file文件的前提下)
先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法
将图片压缩的方法写到这个公用的js(api.js)中
//base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
function dataURLtoFile(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], { type: mime });
}
//压缩图片
function compressImg(file){
var src;
var files;
var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
var read = new FileReader();
read.readAsDataURL(file);
return new Promise(function(resolve, reject){
read.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function(){
//默认按比例压缩
var w = this.width,
h = this.height;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var base64;
// 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
ctx.drawImage(this, 0, 0, w, h);
if(fileSize<1){
//如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1);
}else if(fileSize>1&&fileSize<2){
//如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5);
}else{
//如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2);
}
// 回调函数返回file的值(将base64编码转成file)
files = dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
resolve(files)
};
};
})
};
//结尾处将该方法暴露出来供外部调用
export default {
compressImg,
}
在main.js中引入公用js(api.js)
import api from './http/api.js' //这里注意自己的路径
Vue.prototype.$api = api //注册为全局变量
接下来在需要的地方调用我们的公用方法
this.$api.compressImg()//调用
我的调用方法
图片压缩的方法为异步执行 使用async await 解决异步问题(需要等压缩完成后)
//上传前压缩图片
async beforeRead(file){//async await 解决异步问题,
var formData = new FormData();//创建新的form
if(file.length){ //file.length为真的时候说明是多图上传 要循环多图将file对象放进form中
for(let i=0;i
var f = await this.$api.compressImg(file[i]) //await只能放在async函数里 await会等待异步方法的返回值拿到以后在执行后面的方法
formData.set('file'+i,f)
}
}else{
let f = await this.$api.compressImg(file)
formData.set('file0',f)
}
}
然后将formData传给后台,生成图片的线上地址就OK了!
总结
到此这篇关于vue中实现图片压缩 file文件的方法的文章就介绍到这了,更多相关vue图片压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
vue图片压缩不失真_vue中实现图片压缩 file文件的方法相关推荐
- Android NDK编译中在libs\armeabi中加入第三方so库文件的方法
Android NDK编译中在libs\armeabi中加入第三方so库文件的方法 假设要加入库文件的名字为libffmpeg.so文件 1.要在project\jni目录下新建一目录prebuilt ...
- python如何复制oracle数据_Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法...
本文实例讲述了Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法.分享给大家供大家参考.具体实现方法如下: # Export Oracle database tables ...
- vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决 今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
- android图片放大失真,Android中解决图片文字放大失真的问题
1 背景自适应且不失真问题的存在背景自适应且不失真问题的存在 制作自适应背景图片是 UI 开发的一个广泛问题 也是界面设计师渴望解决的问题 我 相信我们彼此都深有体会 比如 列表的背景图一定 但是列表 ...
- vue获取input的属性_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
- vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
- php图片比例不失真,PHP中图片实现等比例不失真缩放
笔者在设计http://www.cityxii.cn的主页过程中,有遇到图片缩放问题.由于页面的图片是从论坛里面抽取,而用户在论坛里面所发图片大小不一,展示出来难免会要变形. http://www.c ...
- 赛效:如何压缩wps文档中的图片
我们在使用WPS编辑文档的时候,经常会用图片进行补充说明或者美化.如果一个文档插入的图片太多,就会造成文档体积特别大,无论是在保存还是传输方面,都会非常不便.如果我们能将图片压缩,就可以解决上述问题. ...
- python读取excel图片尺寸_Python读取excel中的图片完美解决方法
excel中有图片是很常见的,但是通过python读取excel中的图片没有很好的解决办法. 网上找了一种很聪明的方法,原理是这样的: 1.将待读取的excel文件后缀名改成zip,变成压缩文件. 2 ...
- java 图片动画_java在窗口中添加图片做动画,怎么一闪一闪的?
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 视频来自:优酷 在java中添加图片做动画效果,怎么一闪一闪的运动啊?怎样才能让它不闪的连续运动呢? 下面是代码,代码项目project里有两个类,一个是 ...
最新文章
- 人脸识别技术新突破,网友:匪徒带着面罩呢?
- 从零开始的AI·决策树原来这么好理解(附实例代码)
- 减少该死的 if else 嵌套
- AtCoder Regular Contest 065
- python运行pyc文件_python中__pyc__文件的生成和作用
- lisp中getkword输入默认_2分钟学会在Word中制作田字格 米字格 书法练字再也不用买本子了...
- SpringMVC 理论与有用技术(一) 简单、有用、易懂的几个实例
- dede 验证码不显示 vdimgck.php,织梦(dedecms)后台登录验证码不显示或不正常的解决方法...
- MyBatis中Like语句使用方式
- tracert查网络问题
- 2010年全国职称计算机考试专用教程——AutoCAD 2004制图软件 (含光盘下载)
- Linux系统,Hadoop,R语言,RHadoop的安装
- struts2 拦截器
- lol官网服务器维修啥意思,英雄联盟5.6维护 lol官网服务器维护公告
- 0xc0000225无法进系统_手把手研习win10系统出现0xc0000225无法进入系统的方法
- Java期末复习速成(一)
- speedoffice如何调整Word文档表格单元格大小
- paddle video_tag paddle.fluid.io.xmap_readers
- PLC通讯实现-C#实现汇川PLC-AM401以太网通讯ModBus TCP
- python|解决Cannot open D:\python\Anaconda\envs\tensorflow\Scripts\pip-script.py(重装pip)