首頁  >  文章  >  web前端  >  行動端利用html5對照片處理的教學實例

行動端利用html5對照片處理的教學實例

零下一度
零下一度原創
2017-05-05 14:45:481460瀏覽

前一陣在公司用vue開發webapp,遇到一個用戶拍照或調用手機相簿展示圖片,然後上傳伺服器的需求,接觸前端僅半年的我走上了一路踩坑的道路,下面我來說說我遇到的那些坑!

各種坑匯總

  • 調取手機相簿
    iOS到沒什麼問題,安卓手機好坑啊,網路上搜了很多辦法,要嘛就是有的手機不管用,要嘛就是只能調相簿不能調相機,要嘛就是只能調相機不能調相簿

  • #調取相片拿到相片後渲染到介面上,iOS又出了問題,透過相機拍攝的圖片是旋轉過90度的,或者蘋果裡面正常的圖片到了安卓機展示是旋轉90的,也有的圖片蘋果上正常在後台是歪的。身為一個iOS開發出身的我這就不理解了,經過幾番查證,得出一個結論,蘋果的相機是歪的!

  • 圖片渲染過後瀏覽器會崩潰,尤其是在微信,不得不說,微信好坑啊,什麼東西到微信上就會出現各種問題!

  • 然後是圖片上傳的問題,一開始採用了文件上傳的形式,後來結果測試回饋,很多安卓機不能上傳成功!說多了都是淚,不多說進正題!

總結一下我的解決辦法,希望能對跟我一樣還是個小白的人有所幫助

調取手機相簿和相機

#採用h5調取相簿雖然是一句話從網頁調取,但是如果想相冊,相機都調的話要這麼寫(我真的是查了好久)

<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 ,利用了一個叫exif.js的插件獲取一下手機拍攝的方向(也就是拍照時是豎著拿手機還是橫著,),然後判斷下設備,對iOS設備的三個方向對圖片進行旋轉,利用canvas畫到畫布上

btnUploadFile(e){
      //获取图片
      var  self = this;
      var filechooser = document.getElementById(&#39;filechooser&#39;);
      var previewer = document.getElementById(&#39;previewer&#39;);
      var that = e.target;
      var files = that.files;
      var file = files[0];
      //判断拍摄方向,
       EXIF.getData(file,function(){
            self.orientation=EXIF.getTag(this,&#39;Orientation&#39;);
       });
      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() {
                //图片旋转压缩处理后的base64
                var compressedDataUrl =self.compress(img,self.fileData.type);
               //渲染到img标签上
                self.toPreviewer(compressedDataUrl);
               img = null;
           };
         img.src = result;
      };
      reader.readAsDataURL(self.fileData);
},

圖片渲染

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

//对图片进行旋转,压缩的方法,最终返回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(&#39;canvas&#39;);
    canvas.width=width=drawWidth;
    canvas.height=height=drawHeight;
    var context=canvas.getContext(&#39;2d&#39;);
    //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
    if($.device.ios){
         switch(this.orientation){
              //iphone横屏拍摄,此时home键在左侧
             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旋转校正
     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;
},

最後拿到base6464給渲染給img標籤的src

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

圖片上傳

上面拿到了base64  後台提供一個base64上傳圖片的接口,base64有個好處是我們獲取到的base64  是進行旋轉壓縮後圖片的base64 ,這樣我們上傳伺服器,或從別的地方展示這個圖片都是旋轉壓縮後的,如果其他頁面要展示這張圖片,就省去了旋轉壓縮的過程!其實我現在也不知道為什麼透過傳文件方式傳圖片有的安卓機不行,不過改base64上傳方式成功後就業沒在糾結。

感覺踩了不少坑,歸根究底還是自己前端經驗不足啊!

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#

以上是行動端利用html5對照片處理的教學實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn