Tutorial-Beispiel für die Verwendung von HTML5 zur Verarbeitung von Fotos auf einem mobilen Endgerät

Vor einiger Zeit habe ich in meinem Unternehmen eine Webanwendung mit Vue entwickelt und einen Benutzer getroffen, der ein Foto gemacht oder das Handyalbum aufgerufen hat, um das Bild anzuzeigen, und es dann nach nur einem halben Jahr hochgeladen hat Als ich mit dem Front-End arbeitete, begab ich mich auf einen Weg voller Fallstricke. Lassen Sie mich weiter unten darüber sprechen.

Eine Zusammenfassung verschiedener Fallstricke

• Das mobile Fotoalbum aufrufen
  Mit iOS gibt es kein Problem, aber Android-Telefone sind wirklich viele Fallstricke Möglichkeiten online, und es gibt einige. Das Telefon funktioniert nicht, entweder kann es nur das Fotoalbum, aber nicht die Kamera anpassen, oder es kann nur die Kamera, aber nicht das Fotoalbum anpassen

• Rufen Sie das Fotoalbum auf und rendern Sie es auf der Benutzeroberfläche, nachdem Sie das Foto erhalten haben, und iOS wird erneut angezeigt. Das Problem besteht darin, dass die von der Kamera aufgenommenen Bilder um 90 Grad gedreht sind oder die normalen Bilder auf Apple bei der Anzeige auf Android um 90 Grad gedreht werden Mobiltelefone und einige Bilder, die bei Apple normal sind, sind im Hintergrund verzerrt. Als iOS-Entwickler verstehe ich das nicht. Nach mehreren Untersuchungen bin ich zu dem Schluss gekommen, dass die Kamera von Apple schief ist!

• Der Browser stürzt nach dem Rendern des Bildes ab, insbesondere bei WeChat. Ich muss sagen, dass beim Hochladen von WeChat alle möglichen Probleme auftreten können.

• Dann gibt es noch das Problem beim Hochladen von Bildern. Später zeigten Testergebnisse, dass viele Android-Telefone nicht erfolgreich hochgeladen werden konnten. Wenn Sie zu viel sagen, werden Sie Tränen vergießen. Wenn Sie nicht zu viel sagen, kommen wir zur Sache!

Um meine Lösung zusammenzufassen, hoffe ich, dass sie für Leute wie mich hilfreich ist, die noch Neulinge sind.

Erinnern Sie sich an das Handyalbum und die Kamera

Obwohl die Verwendung von h5 zum Aufrufen des Fotoalbums darin besteht, es in einem Satz von der Webseite aus aufzurufen, müssen Sie, wenn Sie das Fotoalbum und die Kamera aufrufen möchten, so schreiben (ich habe es wirklich lange überprüft)

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

Bildwiedergabe

Ich habe Canvas für die Bildwiedergabe verwendet und ein Plug-In namens exif.js verwendet, um die Aufnahmerichtung des Telefons zu ermitteln (d. h., ob das Telefon vertikal gehalten werden soll). oder horizontal beim Aufnehmen von Bildern) und beurteilen Sie dann das Gerät. Für iOS-Geräte Drehen Sie das Bild in drei Richtungen und zeichnen Sie es mit der Leinwand auf die Leinwand

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() {
                //图片旋转压缩处理后的base64
                var compressedDataUrl =self.compress(img,self.fileData.type);
               //渲染到img标签上
                self.toPreviewer(compressedDataUrl);
               img = null;
           };
         img.src = result;
      };
      reader.readAsDataURL(self.fileData);
},

Bildwiedergabe

Beim Rendern Das Bild muss nicht nur gedreht, sondern auch komprimiert werden, da die aktuellen Kamerapixel zu groß sind. Hochauflösende Bilder führen zum Absturz des Browsers. Wenn Sie WeChat entwickeln, ist dies natürlich nur erforderlich Um es im WeChat-Browser anzupassen, können Sie sich auf die Methode zum Aufrufen des Fotoalbums in WeChat beziehen, damit es nicht zu Bildverzerrungen oder Abstürzen kommt. Wenn wir nicht nur WeChat machen, müssen wir natürlich trotzdem komprimieren, auch mit 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('canvas');
    canvas.width=width=drawWidth;
    canvas.height=height=drawHeight;
    var context=canvas.getContext('2d');
    //判断图片方向，重置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;
},

Endlich Holen Sie sich base64 zum src-Upload des Bildes

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

Der Base64-Hintergrund bietet eine Base64-Schnittstelle zum Hochladen von Bildern Das von uns erhaltene Base64-Bild wird gedreht und komprimiert, sodass das Bild beim Hochladen auf den Server oder bei der Anzeige von anderen Orten gedreht und komprimiert wird Rotation und Kompression entfallen! Tatsächlich weiß ich immer noch nicht, warum einige Android-Geräte keine Bilder über die Dateiübertragung hochladen können, aber nachdem ich die Base64-Upload-Methode erfolgreich geändert habe, muss ich mir keine Sorgen mehr machen, einen Job zu finden.

Ich habe das Gefühl, dass ich auf viele Fallstricke gestoßen bin. Letztlich liegt es an meiner mangelnden Front-End-Erfahrung!

[Verwandte Empfehlungen]

1.

Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTutorial-Beispiel für die Verwendung von HTML5 zur Verarbeitung von Fotos auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!