本文將為大家詳細介紹“移動端怎么利用html5對照片處理”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“移動端怎么利用html5對照片處理”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

專業(yè)領(lǐng)域包括成都網(wǎng)站建設、做網(wǎng)站、成都商城網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同，成都創(chuàng)新互聯(lián)公司的整合解決方案結(jié)合了幫做網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

各種坑匯總

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

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

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

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

調(diào)取手機相冊和相機

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

圖片渲染

圖片渲染我采用了canvas ，利用了一個叫 exif.js的插件獲取一下手機拍攝的方向（也就是拍照時是豎著拿手機還是橫著，），然后判斷下設備，對iOS設備的三個方向?qū)D片進行旋轉(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();
         //進行圖片的渲染
           img.onload = function() {
                //圖片旋轉(zhuǎn)壓縮處理后的base64
                var compressedDataUrl =self.compress(img,self.fileData.type);
               //渲染到img標簽上
                self.toPreviewer(compressedDataUrl);
               img = null;
           };
         img.src = result;
      };
      reader.readAsDataURL(self.fileData);
},

圖片渲染

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

//對圖片進行旋轉(zhuǎn)，壓縮的方法，最終返回base64  渲染給img標簽的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默認的是home鍵在右方的橫屏拍攝方式
    if($.device.ios){
         switch(this.orientation){
              //iphone橫屏拍攝，此時home鍵在左側(cè)
             case 3:
                   degree=180;
                   drawWidth=-width;
                   drawHeight=-height;
                    break;
          //iphone豎屏拍攝，此時home鍵在下方(正常拿手機的方向)
              case 6:
                    canvas.width=height;
                    canvas.height=width;
                    degree=90;
                    drawWidth=width;
                    drawHeight=-height;
                    break;
              //iphone豎屏拍攝，此時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標簽的src

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

圖片上傳

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

如果你能讀到這里，小編希望你對“移動端怎么利用html5對照片處理”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！