移动端利用html5对照片处理的教程实例

<form id="uploadForm" enctype="multipart/form-data">

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

</form>

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

},