最近公司有个需求，要求上传图片大小10MB ，并且要将用户上传图片压缩在上传，baidu 查了一些资料。
解决办法就是，利用canvas进行图片压缩，canvas的toDataURL方法的第二个参数是图片质量，通过取不同的图片质量来达到压缩的效果。
技术栈：vue/element/canvas ...
------------------------------------------------------------------------------------------------
方法步骤
- 获取到图片的base64格式；
- 等到图片加载完成后，将图片画到canvas上进行压缩；
- 通过canvas的toDataURL方法来实现压缩；
- 上传图片将dataURL转换成Bolb对象；
- formData对象添加Bold ；
- 判断Blod大小，上传后台服务
废话不多说直接上代码~~~
1 入口方法
minEvent(file) { //element-ui upload 组件 before-upload方法 let that = this; // 将vue的上下文this挂在that上，防止与reader.onload()方法的回调函数中的this冲突 let reader = new FileReader(); // 读取 console.log(file); reader.readAsDataURL(file); reader.onload = function () { let content = this.result; //图片的src，base64格式 let img = new Image(); img.src = content; img.onload = function () { //图片加载完毕转换canvas 进行压缩 that.compressEvent(img, (dataURL) => { that.uploadImg(dataURL, file); }); }; }; }
2 通过canvas 进行图片压缩
//通过canvas 进行图片压缩 compressEvent(img, callback) { let that = this; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; canvas.width = width; canvas.height = width / (width / height); //等比例缩缩放图片 ctx.drawImage(img, 0, 0, width, height); let dataURL = canvas.toDataURL("image/jpeg", 0.5); // 0.7 为图片质量 图片质量0~1默认值0.92 that.img = dataURL; callback ? callback(dataURL) : null; //调用回调函数 }
3 图片转换成blob对象
dataURItoBlob(dataurl) { //dataurl是base64格式 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 Blob([u8arr], { type: mime }); }
4 上传图片方法
uploadImg(dataURL, file) { let that = this; let blob = that.dataURItoBlob(dataURL); let formData = new FormData(); formData.append("file", blob, file.name); console.log(blob.size / 1024 / 1024); if (blob.size > 10 * 1024 * 1024) { alert("图片大小超过10M"); return false; } // 上传代码省略 }
