前一陣在公司用vue開發(fā)webapp，遇到一個(gè)用戶拍照或者調(diào)用手機(jī)相冊(cè)展示圖片，然后上傳服務(wù)器的需求，接觸前端僅半年的我走上了一路踩坑的道路，下面我來說說我遇到的那些坑！

各種坑匯總

• 調(diào)取手機(jī)相冊(cè)
  iOS到?jīng)]什么問題，安卓手機(jī)好坑啊，網(wǎng)上搜了很多辦法，要么就是有的手機(jī)不管用，要么就是只能調(diào)相冊(cè)不能調(diào)相機(jī)，要么就是只能調(diào)相機(jī)不能調(diào)相冊(cè)

• 調(diào)取相冊(cè)拿到相片后渲染到界面上，iOS又出了問題，通過相機(jī)拍攝的圖片是旋轉(zhuǎn)過90度的，或者蘋果里面正常的圖片到了安卓機(jī)展示是旋轉(zhuǎn)90的，也有的圖片蘋果上正常在后臺(tái)是歪的。身為一個(gè)iOS開發(fā)出身的我這就不理解了，經(jīng)過幾番查證，得出一個(gè)結(jié)論，蘋果的相機(jī)是歪的！

• 圖片渲染過后瀏覽器會(huì)崩潰，尤其是在微信，不得不說，微信好坑啊，什么東西到微信上就會(huì)出現(xiàn)各種問題！

• 然后是圖片上傳的問題，一開始采用了文件上傳的形式，后來結(jié)果測(cè)試反饋，很多安卓機(jī)不能上傳成功！說多了都是淚，不多說進(jìn)正題！

總結(jié)一下我的解決辦法，希望能對(duì)跟我一樣還是個(gè)小白的人有所幫助

調(diào)取手機(jī)相冊(cè)和相機(jī)

采用h5調(diào)取相冊(cè) 雖然是一句話從網(wǎng)頁調(diào)取，但是如果想相冊(cè)，相機(jī)都調(diào)的話 要這么寫 （我真的是查了好久）

<form id="uploadForm" enctype="multipart/form-data">     <input class="upload-open-photo" accept="image/*" type="file" id="filechooser" v-on:change="btnUploadFile($event)"/>  </form>

圖片渲染

圖片渲染我采用了canvas ，利用了一個(gè)叫 exif.js的插件獲取一下手機(jī)拍攝的方向（也就是拍照時(shí)是豎著拿手機(jī)還是橫著，），然后判斷下設(shè)備，對(duì)iOS設(shè)備的三個(gè)方向?qū)D片進(jìn)行旋轉(zhuǎn)，利用canvas畫到畫布上

btnUploadFile(e){        //獲取圖片        var  self = this;        var filechooser = document.getElementById('filechooser');        var previewer = document.getElementById('previewer');        var that = e.target;        var files = that.files;        var file = files[0];        //判斷拍攝方向，         EXIF.getData(file,function(){              self.orientation=EXIF.getTag(this,'Orientation');         });        self.fileData = file;         // 接受 jpeg, jpg, png 類型的圖片         if (!//(?:jpeg|jpg|png)/i.test(file.type)){               return;        }        var reader = new FileReader();       reader.onload = function() {            var result = this.result;            var img =  new Image();           //進(jìn)行圖片的渲染             img.onload = function() {                  //圖片旋轉(zhuǎn)壓縮處理后的base64                  var compressedDataUrl =self.compress(img,self.fileData.type);                 //渲染到img標(biāo)簽上                  self.toPreviewer(compressedDataUrl);                 img = null;             };           img.src = result;        };        reader.readAsDataURL(self.fileData);  },

圖片渲染

圖片渲染時(shí)不但要把圖片旋轉(zhuǎn)，還要進(jìn)行壓縮，由于現(xiàn)在相機(jī)像素太高，高清圖片會(huì)導(dǎo)致瀏覽器崩潰，當(dāng)然如果是做的微信開發(fā)，只需要在微信瀏覽器中適配，那么可以參考微信jssdk中的調(diào)用相冊(cè)的方法，這樣就不會(huì)有圖歪和崩潰的問題了。當(dāng)然如果不是只做微信，我們還是要進(jìn)行壓縮，同樣是采用canvas
（mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html ）

//對(duì)圖片進(jìn)行旋轉(zhuǎn)，壓縮的方法，最終返回base64  渲染給img標(biāo)簽的src  compress(img, fileType) {        var degree=0,drawWidth,drawHeight,width,height;        drawWidth=img.width;        drawHeight=img.height;        //以下改變一下圖片大小       var maxSide = Math.max(drawWidth, drawHeight);       if (maxSide > 1024) {             var minSide = Math.min(drawWidth, drawHeight);              minSide = minSide / maxSide * 1024;              maxSide = 1024;             if (drawWidth > drawHeight) {                  drawWidth = maxSide;                  drawHeight = minSide;              } else {                  drawWidth = minSide;                  drawHeight = maxSide;              }      }      var canvas=document.createElement('canvas');      canvas.width=width=drawWidth;      canvas.height=height=drawHeight;      var context=canvas.getContext('2d');      //判斷圖片方向，重置canvas大小，確定旋轉(zhuǎn)角度，iphone默認(rèn)的是home鍵在右方的橫屏拍攝方式      if($.device.ios){           switch(this.orientation){                //iphone橫屏拍攝，此時(shí)home鍵在左側(cè)               case 3:                     degree=180;                     drawWidth=-width;                     drawHeight=-height;                      break;            //iphone豎屏拍攝，此時(shí)home鍵在下方(正常拿手機(jī)的方向)                case 6:                      canvas.width=height;                      canvas.height=width;                      degree=90;                      drawWidth=width;                      drawHeight=-height;                      break;                //iphone豎屏拍攝，此時(shí)home鍵在上方                 case 8:                        canvas.width=height;                         canvas.height=width;                         degree=270;                         drawWidth=-width;                         drawHeight=height;                         break;            }       }       //使用canvas旋轉(zhuǎn)校正       context.rotate(degree*Math.PI/180);       context.drawImage(img,0,0,drawWidth,drawHeight);       // 壓縮0.5就是壓縮百分之50       var base64data = canvas.toDataURL(fileType, 0.5);       canvas = context = null;       this.urlbase = base64data;        return base64data;  },

最終拿到base64渲染給img標(biāo)簽的src

toPreviewer(dataUrl) {         previewer.src = dataUrl;   },

圖片上傳

上面拿到了base64 后臺(tái)提供一個(gè)base64上傳圖片的接口，base64有個(gè)好處是我們獲取到的base64 是進(jìn)行旋轉(zhuǎn)壓縮后圖片的base64，這樣我們上傳服務(wù)器，或從別的地方展示這個(gè)圖片都是旋轉(zhuǎn)壓縮后的，如果其他頁面要展示這張圖片，就省去了旋轉(zhuǎn)壓縮的過程！其實(shí)我現(xiàn)在也不知道為什么通過傳文件方式傳圖片有的安卓機(jī)不行，不過改base64上傳方式成功后就業(yè)沒在糾結(jié)。

感覺踩了不少坑，歸根結(jié)底還是自己前端經(jīng)驗(yàn)不足??！

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程