vue中实现图片压缩 file文件的方法

vue中实现图片压缩中实现图片压缩 file文件的方法文件的方法

主要介绍了vue中实现图片压缩 file文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工

作具有一定的参考借鉴价值,需要的朋友可以参考下

项目中遇到上传图片需要在前端进行图片压缩，将我的实现思路记录一下。（我已经拿到上传的项目中遇到上传图片需要在前端进行图片压缩，将我的实现思路记录一下。（我已经拿到上传的file文件的前提下）文件的前提下）

先创建一个公用的js，这里我的是api.js，里面封装一些常用的方法

将图片压缩的方法写到这个公用的js（api.js）中

//base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）

function dataURLtoFile(dataurl) {

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

//默认按比例压缩

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

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的话这一步可以省略