Vue使用mixins实现压缩图片代码
本文介绍了Vue使用mixins实现压缩图片代码，分享给大家，具体如下：
图片压缩
创建mixinsimage-compress.js
exportdefault{
methods:{
/**
*检查并压缩图片大小
*/
checkAndHandleCompression(file){
returnnewPromise((resolve,reject)=>{
this.imgBase64(file,(image,canvas)=>{
letmaxSize=2*1024;//2M(单位KB)
letfileSize=file.size/1024;//图片大小(单位KB)
letuploadSrc,uploadFile;
if(fileSize>maxSize){//如果图片大小大于maxSize，进行压缩
uploadSrc=canvas.toDataURL(file.type,maxSize/fileSize);
uploadFile=this.convertBase64UrlToFile(uploadSrc,file.name);//转成file文件
}else{
uploadSrc=image.src;
uploadFile=file;
}
letcompressedSize=uploadFile.size/1024;//压缩后图片大小(单位KB)
//判断图片大小是否小于maxSize，如果大于则继续压缩至小于为止
if(compressedSize.toFixed(2)>maxSize){
this.checkAndHandleUpload(uploadFile);
}else{
letfileOptions={uploadSrc,uploadFile};
resolve(fileOptions);
}
});
});
},
/**
*将图片转化为base64
*/
imgBase64(file,callback){
//看支持不支持FileReader
if(!file||!window.FileReader)return;
//创建一个Image对象
letimage=newImage();
//绑定load事件处理器，加载完成后执行
image.onload=function(){
//创建canvasDOM对象
letcanvas=document.createElement('canvas');
//返回一个用于在画布上绘图的环境,'2d'指定了您想要在画布上绘制的类型
letctx=canvas.getContext('2d');
//如果高度超标//参数，最大高度
letMAX_HEIGHT=3000;
if(image.height>MAX_HEIGHT){
//宽度等比例缩放*=
image.width*=MAX_HEIGHT/image.height;
image.height=MAX_HEIGHT;
}
//获取canvas的2d环境对象,
//可以理解Context是管理员，canvas是房子
ctx.clearRect(0,0,canvas.width,canvas.height);
//重置canvas宽高
canvas.width=image.width;
canvas.height=image.height;
//将图像绘制到canvas上
ctx.drawImage(image,0,0,image.width,image.height);
callback(image,canvas);
};
if(/^image/.test(file.type)){
//创建一个reader
letreader=newFileReader();
//将图片将转成base64格式
reader.readAsDataURL(file);
//读取成功后的回调
reader.onload=function(){
//设置src属性，浏览器会自动加载。
//记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src=this.result;
};
}
},
/**
*把Base64转换成file文件
*/
convertBase64UrlToFile(dataurl,filename){
letarr=dataurl.split(','),
mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),n=bstr.length,
u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewFile([u8arr],filename,{type:mime});
}
}
};
example
...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。