Exemple de tutoriel d'utilisation de HTML5 pour traiter des photos sur un terminal mobile

Il y a quelque temps, je développais une application Web utilisant Vue dans mon entreprise. J'ai rencontré un utilisateur qui a pris une photo ou appelé l'album du téléphone portable pour afficher la photo, puis l'a téléchargée sur le serveur après seulement six mois. de travailler avec le front-end, je me suis lancé dans un chemin semé d'embûches. Laissez-moi en parler ci-dessous.

Un résumé des différents pièges

• Appeler l'album photo mobile
  Il n'y a pas de problème avec iOS, mais les téléphones Android sont vraiment des pièges, j'ai beaucoup cherché. façons en ligne, et il y en a. Le téléphone ne fonctionne pas, soit il ne peut régler que l'album photo mais pas l'appareil photo, soit il ne peut régler que l'appareil photo mais pas l'album photo

• Appelez l'album photo et affichez-le sur l'interface après avoir obtenu la photo, et iOS apparaît à nouveau. Le problème est que les photos prises par l'appareil photo sont pivotées de 90 degrés, ou que les images normales sur Apple sont pivotées de 90 degrés lorsqu'elles sont affichées sur Android. téléphones, et certaines images normales sur Apple sont déformées en arrière-plan. En tant que développeur iOS, je ne comprends pas cela. Après plusieurs investigations, je suis arrivé à la conclusion que l'appareil photo d'Apple est tordu !

• Le navigateur plantera après le rendu de l'image, en particulier sur WeChat. Je dois dire que WeChat est tellement délicat que toutes sortes de problèmes se produiront lorsque quelque chose est téléchargé sur WeChat !

• Ensuite, il y a le problème du téléchargement d'images. Au début, il s'agissait d'un téléchargement de fichiers. Plus tard, les résultats des tests ont montré que de nombreux téléphones Android ne pouvaient pas télécharger correctement ! Si vous en dites trop, vous verserez des larmes. Si vous n’en dites pas trop, allons droit au but !

Pour résumer ma solution, j'espère qu'elle sera utile aux personnes encore novices comme moi

Rappelez-vous l'album du téléphone portable et l'appareil photo

Bien qu'utiliser h5 pour appeler l'album photo revient à l'appeler depuis la page web en une phrase, si vous voulez appeler l'album photo et l'appareil photo, vous devez écrire comme ça (je l'ai vraiment vérifié pendant longtemps)

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

Rendu d'image

J'ai utilisé Canvas pour le rendu d'image et utilisé un plug-in appelé exif.js pour obtenir la direction de prise de vue du téléphone (c'est-à-dire s'il faut tenir le téléphone verticalement ou horizontalement lors de la prise de photos), puis jugez l'appareil. Pour les appareils iOS Faites pivoter l'image dans trois directions et utilisez la toile pour la dessiner sur la toile

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);
},

Rendu d'image

Lors du rendu l'image, vous devez non seulement faire pivoter l'image, mais également la compresser, car les pixels actuels de l'appareil photo sont trop grands. Les images haute définition feront planter le navigateur. Bien sûr, si vous développez WeChat, vous n'en avez besoin que. pour l'adapter dans le navigateur WeChat. Ensuite, vous pouvez vous référer à la méthode d'appel de l'album photo dans WeChat jssdk, afin qu'il n'y ait pas de distorsion ou de crash d'image. Bien sûr, si nous ne faisons pas que WeChat, nous devons quand même compresser, également en utilisant 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;
},

Enfin get base64 Render to the src

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

téléchargement d'image de la balise img

Le base64 est obtenu ci-dessus. L'arrière-plan fournit une interface base64 pour télécharger des images. la base64 que nous obtenons est pivotée et compressée. Base64 de l'image finale, de sorte que lorsque nous la téléchargeons sur le serveur ou l'affichons depuis d'autres endroits, l'image sera pivotée et compressée si d'autres pages souhaitent afficher cette image, le processus. de rotation et de compression seront omises ! En fait, je ne sais toujours pas pourquoi le téléchargement de photos via le transfert de fichiers ne fonctionne pas sur certains appareils Android. Cependant, après avoir réussi à changer la méthode de téléchargement base64, je n'ai plus à me soucier de trouver un emploi.

J'ai l'impression d'avoir marché sur beaucoup d'embûches. En dernière analyse, c'est mon manque d'expérience front-end !

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

3. Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!