移动端利用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);},

//对图片进行旋转，压缩的方法，最终返回base64  渲染给img标签的srccompress(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;},

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