vue+element-ui上传图片时压缩大小
第一种方法:需要安装一个模块
yarn add image-conversion --save
<el-upload
ref="upload"
:data="date"
:action="URL+'/api/post/file'"
:before-upload="beforeAvatarAUDIO3" //将用到此方法
:on-success="handleAvatarAUDIO3"
:on-error="error3"
:file-list="fileList"
>
第一种方法,需要引入imageConversion
import imageConversion from 'image-conversion'
beforeAvatarAUDIO3(file) { //第一种方法开始------------------------------------------------------------------------- return new Promise((resolve, reject) => { let _URL = window.URL || window.webkitURL // let isLt2M = file.size / 1024 / 1024 > 2 // 判定图片大小是否小于4MB // 这里需要计算出图片的长宽 let img = new Image() img.onload = function () { file.width = img.width // 获取到width放在了file属性上 file.height = img.height // 获取到height放在了file属性上 let valid = img.width > 1280 // 图片宽度大于1280 // compressAccurately有多个参数时传入对象 if (valid) { imageConversion.compressAccurately(file, { size: 1024, //图片大小压缩到1024kb width:1280 //宽度压缩到1280 }).then(res => { resolve(res) }) } else resolve(file) } // 需要把图片赋值 img.src = _URL.createObjectURL(file) }) //第一种方法结束---------------------------------------------------------------------------------
//第二种方法(改变图片分辨率大小实现压缩)----------------------------------------------------------------- const _this = this return new Promise(resolve => { const reader = new FileReader() const image = new Image() image.onload = (imageEvent) => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); let width = image.width; let height = image.height;
//等比缩放第一种 宽或高超过1280,进行等比例缩放
let rate = image.width / image.height if (width > 1280 || height > 1280) { width = rate > 1 ? 1280 : 1280 * rate; height = rate < 1 ? 1280 : 1280 / rate; }
//等比缩放第二种 宽或高超过1280,等比缩放
let rate = 1280 / width > 1;
let tate = 1280 / height > 1;
if(!rate){
let product = 1280 / width
width = Math.floor((width * product)*100)/100
height = Math.floor((height * product)*100)/100
}else if(!tate){
let product = 1280 / height
width = Math.floor((width * product)*100)/100
height = Math.floor((height * product)*100)/100
}
//宽度超过1280,等比缩放
let rate = 1280 / width > 1;
if (!rate) {
let product = 1280 / width;
width = Math.floor(width * product * 100) / 100;
height = Math.floor(height * product * 100) / 100;
}
canvas.width = width; canvas.height = height; context.clearRect(0, 0, width, height); context.drawImage(image, 0, 0, width, height); const dataUrl = canvas.toDataURL(file.type); const blobData = _this.dataURItoBlob(dataUrl, file.type); resolve(blobData) } reader.onload = (e => { image.src = e.target.result; }); reader.readAsDataURL(file); })
//第二种方法结束-----------------------------------------------------------------------------------
},
dataURItoBlob(dataURI, type) { var binary = atob(dataURI.split(',')[1]); var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], {type: type}); },