基于canvas的图片压缩函数实现

由于图片压缩中使用了大量异步操作，这里使用es7 async 语法处理异步问题基本思路是:先将file数据读取为DataUrl类型的数据，再将DataUrl绘制到canvas，通过canvas的apitoDataURL转换为base64数据并压缩数据，最后再将base64数据转换为blob数据类型，再上传到服务器。整个流程就完成了。下面是具体的实现方式。1.读取file转换为DataUrlasync function fileLoad(file){ return new Promise((resolve)=>{ let ready = new FileReader(); /开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时, readyState属性的值会成为DONE,如果设置了onloadend事件处理程序, 则调用之.同时,result属性中将包含一个data: URL格式的字符串以表 示所读取文件的内容./ ready.readAsDataURL(file); ready.onload = function () { resolve(this.result); } }) }2.将数据绘制到canvas上，压缩数据async function canvasDataURL(path, obj) { return new Promise((resolve)=>{ let img = new Image(); img.src = path; img.onload = function () { let that = this; // 默认按比例压缩 let w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); let quality = 0.7; // 默认图片质量为0.7 //生成canvas let canvas = document.createElement(‘canvas’); let ctx = canvas.getContext(‘2d’); // 创建属性节点 let anw = document.createAttribute(“width”); anw.nodeValue = w; let anh = document.createAttribute(“height”); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if (obj.quality && obj.quality <= 1 && obj.quality > 0) { quality = obj.quality; } // quality值越小，所绘制出的图像越模糊 let base64 = canvas.toDataURL(‘image/jpeg’, quality); // 回调函数返回base64的值 resolve(base64); } }); }3.将bas64转换为blobasync function convertBase64UrlToBlob(urlData) { return new Promise((resolve)=>{ let arr = urlData.split(’,’), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n–) { u8arr[n] = bstr.charCodeAt(n); } let blob = new Blob([u8arr], {type: mime}); resolve(blob); }) }4.最后实现压缩方法/** * 三个参数 * file：一个是文件(类型是图片格式)， * w：配置对象 * photoCompress() */async function photoCompress(file, w) { let re = await fileLoad(file); let base64 = await canvasDataURL(re, w); let blob = await convertBase64UrlToBlob(base64); return new Promise((resolve)=>{ resolve(blob); })}5.使用方法async function upload(file) { let form = new FormData(); let fileData = await photoCompress(file, { quality: 0.5 }); form.append(‘pictrue’,fileData,file.name); // 上传form}