基于canvas的图片压缩函数实现
由于图片压缩中使用了大量异步操作,这里使用es7 async 语法处理异步问题
基本思路是:先将file数据读取为DataUrl类型的数据,再将DataUrl绘制到canvas,通过canvas的apitoDataURL转换为base64数据并压缩数据,最后再将base64数据转换
为blob数据类型,再上传到服务器。整个流程就完成了。下面是具体的实现方式。
1.读取file转换为DataUrl
async 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转换为blob
async 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 }
相关推荐
大地飞鸿 2020-11-12
northwindx 2020-05-31
xdyangxiaoromg 2020-03-27
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06