HTML5を使用してモバイル端末で写真を加工するチュートリアルの例

少し前、私は会社で Web アプリを開発するために Vue を使用していました。あるユーザーに会い、写真を撮ったり、携帯電話のアルバムに電話して写真を表示し、わずか半年後にサーバーにアップロードしました。フロントエンドを使って、私は落とし穴に満ちた道を歩み始めました。その落とし穴について話しましょう。

様々な落とし穴のまとめ

• 携帯電話のアルバムを取得するのは問題ありません
  iOSですが、Android携帯は可哀想なので、ネットで色々方法を調べたり、一部の携帯では使えなかったり、使えなかったりします。アルバムのみを調整できますが、カメラは調整できません。または、カメラのみを調整でき、フォト アルバムは調整できません

• フォト アルバムをロードし、写真を取得してインターフェイス上でレンダリングした後、iOS には別の問題が発生します。カメラで撮影した写真が 90 度回転している、または Apple の通常の写真が到着しています Android のディスプレイが 90 度回転しており、Apple で通常表示される写真の一部が背景で曲がっています。 iOS 開発者として、私はこれを理解できません。いくつか調査した結果、Apple のカメラは曲がっているという結論に達しました。

• 画像がレンダリングされると、特に WeChat ではブラウザがクラッシュします。WeChat に何かがアップロードされると、あらゆる種類の問題が発生します。

• 次に、画像のアップロードの問題があります。最初はファイルのアップロード形式でしたが、その後、多くの Android スマートフォンで正常にアップロードできないことが判明しました。あまり言いすぎると涙が出てしまいますよ、あまり言わないで本題に入りましょう！

私の解決策を要約すると、私と同じようにまだ初心者の人々に役立つことを願っています

モバイルフォトアルバムとカメラを取得します

フォトアルバムをWebページから取得するには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>

画像レンダリング

キャンバスを使用し、exifというプラグインを使用しました。 js を使用して携帯電話の撮影方向 (写真を撮るときに携帯電話を縦に持つか横に持つか) を取得し、デバイスを決定し、iOS デバイスの 3 方向に画像を回転し、キャンバスを使用して描画します。キャンバス

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

画像のレンダリング

画像をレンダリングするときは、画像を回転させたり、圧縮したりするだけでなく、現在のカメラのピクセルが高すぎるため、高解像度の画像を実行すると、当然ながらブラウザがクラッシュします。 WeChat の開発では、WeChat ブラウザで調整するだけで、WeChat の jssdk Album メソッドの呼び出しを参照できるため、画像の歪みや崩壊の問題は発生しません。もちろん、WeChat を実行するだけではない場合は、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;
},

最後に、base64 がレンダリングする src を取得しますimg タグ

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

画像のアップロード

base64 は、base64 経由で画像をアップロードするためのインターフェイスを提供します。この方法で取得した Base64 は、回転および圧縮された画像の Base64 であることです。サーバーにアップロードしたり、他の場所から画像を表示したりできます。この画像を他のページに表示する場合は、回転と圧縮のプロセスが省略されます。実際、一部の Android デバイスがファイル転送で写真をアップロードできない理由はまだわかりませんが、base64 アップロード方法の変更に成功した後は、仕事を見つけることを心配する必要はなくなりました。

結局のところ、フロントエンドの経験が足りないのが原因です。

【関連おすすめ】

1. 無料のh5オンラインビデオチュートリアル

2. php.cnオリジナルのhtml5ビデオチュートリアル

以上がHTML5を使用してモバイル端末で写真を加工するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。