由于圖片壓縮中使用了大量異步操作，這里使用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//生成canvaslet 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 } 超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的基于canvas的图片压缩函数实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。