H5活動已十分普遍，其中一種形式是讓用戶上傳圖片進行參與。移動端上傳圖片，用戶一般都是上傳手機相冊中的圖片，而現(xiàn)在手機的拍攝質(zhì)量越來越高，一般單張照片的尺寸都在3M左右。若直接上傳，十分耗流量，并且體驗效果也不佳。因此需要在上傳之前，先進行本地壓縮。
接下來總結(jié)在h5活動的開發(fā)中圖片壓縮上傳的功能，并標記其中踩過的幾個坑，分享給大家：
小白區(qū)必看
對于移動端圖片上傳毫無概念的話，需要補充FileReader、Blob、FormData三個概念。
1.FileReader
定義
使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù).
方法
事件處理程序
使用
| var fileReader = new FileReader();fileReader.onload = function() { var url = this.result;}//orfileReader.onload = function(e) { var url = e.target.result;} |
2.Blob
BLOB(binary large object)，二進制大對象，是一個可以存儲二進制文件的容器。
3.FormData
利用FormData對象,你可以使用一系列的鍵值對來模擬一個完整的表單,然后使用XMLHttpRequest發(fā)送這個”表單”.
正題
移動端圖片壓縮上傳過程：
1）input file上傳圖片，使用FileReader讀取用戶上傳的圖片；
2）圖片數(shù)據(jù)傳入img對象，將img繪制到canvas上，再使用canvas.toDataURL進行壓縮；
3）獲取壓縮后的base64格式圖片數(shù)據(jù)，轉(zhuǎn)成二進制，塞入formdata，最后通過xmlHttpRequest提交formdata;
1.獲取圖片數(shù)據(jù)
| fileEle.onchange = function() { if (!this.files.length) return; //以下考慮的是單圖情況 var _ua = window.navigator.userAgent; var _simpleFile = this.files[0]; //判斷是否為圖片 if (!///(?:jpeg|png|gif)/i.test(_simpleFile.type)) return; //插件exif.js獲取ios圖片的方向信息 var _orientation; if(_ua.indexOf('iphone') > 0) { EXIF.getData(_simpleFile,function(){ _orientation=EXIF.getTag(this,'Orientation'); }); } //1.讀取文件，通過FileReader，將圖片文件轉(zhuǎn)化為DataURL，即data:img/png;base64，開頭的url，可以直接放在image.src中; var _reader = new FileReader(), _img = new Image(), _url; _reader.onload = function() { _url = this.result; _img.url = _url; _img.onload = function () { var _data = compress(_img); uploadPhoto(_data, _orientation); }; }; _reader.readAsDataURL(_simpleFile);}; |
