1：将压缩js封装起来
/** 图片压缩，默认同比例压缩* @param {Object} fileObj* 图片对象* 回调函数有一个参数，base64的字符串数据*/export function compress(fileObj, callback) {try {const image = new Image()image.src = URL.createObjectURL(fileObj)image.onload = function() {const that = this// 默认按比例压缩let w = that.widthlet h = that.heightconst scale = w / hw = fileObj.width || wh = fileObj.height || (w / scale)let quality = 0.7 // 默认图片质量为0.7// 生成canvasconst canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 创建属性节点const anw = document.createAttribute('width')anw.nodeValue = wconst anh = document.createAttribute('height')anh.nodeValue = hcanvas.setAttributeNode(anw)canvas.setAttributeNode(anh)ctx.drawImage(that, 0, 0, w, h)// 图像质量if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {quality = fileObj.quality}// quality值越小，所绘制出的图像越模糊const data = canvas.toDataURL('image/jpeg', quality)// 压缩完成执行回调const newFile = convertBase64UrlToBlob(data,fileObj.name)callback(newFile)}} catch (e) {console.log('压缩失败!')}}function convertBase64UrlToBlob(urlData,filename) {const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte// 处理异常,将ascii码小于0的转换为大于0const ab = new ArrayBuffer(bytes.length)const ia = new Uint8Array(ab)for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i)}return new File([ab],filename,{ type: 'image/png' })}
注意：这里看需要是Blob，File格式还是Base64格式(我这里使用的是File)
convertBase64UrlToBlob这个方法中要接收filename，例如:
return new File([ab],filename,{ type: 'image/png' })
如果使用Blob，convertBase64UrlToBlob方法中就不需要传filename，例如：
return new Blob([ab],{ type: 'image/png' })
(1):Blob格式传输出
(2):File格式输出
(3):Base64格式
2:将压缩文件引入页面中使用
import { compress } from 'public/config/img-compression'
3:方法中使用压缩
// 上传图片uploadSignedFile (file,fileList) {const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MBlet _this=this//超过2M进行压缩 if (!isLt2M) {let dialogImageUrl = URL.createObjectURL(file.raw)compress(file.raw, function(val) {// console.log(val) 这里可以输出压缩后的大小以及其他参数_this.ruleForm.diaLogFormImg.push(val)})}else{_this.ruleForm.diaLogFormImg.push(file.raw)}},
举例：图片原本大小
压缩后大小
