拍照直接上传or选择很大的原照片，经过canvas 压缩，处理IOS orientation（照片旋转）问题，完美上传

今天是2018年5月的最后一天了，纪念一下炎热的五月。

解决思路：单张上传做个示范

        1.<label>嵌套<input type=file />  选中图片，trigger input 的onchange 事件，通过event 取得其files ;

        2.通过var fReader = new FileReader(),然后用fReader .readAsDataURL(file)将文件转为base64格式，接下来fReader对象会自动触发fReader .onload = function(e){ 

        此处e.target.result 就是base64格式的有效图片url,img标签可以直接使用，当img.src=e.target.result后，                  img.οnlοad=function(){}又会自动触发

}

        3.img.onload函数触发时，我们必须在这个过程中设置照片的最大显示尺寸，用一个额外引入的exif.js判断照片的orientation方向（详解见后面），再用canvas.getContext("2d").rotate(弧度)处理orientation,接着用canvas.getContext("2d").drawImage(thisimg,x,y,imgW,imgH)来压缩图片。

            4.要将照片上传到后台，则用canvas.toBlob方法将上面drawImage()的图片转成blob二进制数据 e.g.：canvas.toBlob( function(blobdata){

        blobdata就是image转换为blob后的数据，我们用一个var formdata= new FormData(); formdata.append("filedname",blobdata);提交给后台。此时注意设置：processData:false//不要对内容转换为string;contentType:false;//不对内容进行编码类型设置

}）

            5.如果要预览，则img.src = canvas.toDataURL("image/jepg",1)就可以实现预览了。

主要js实现如下：

,filechangeOfFaceInput : function($e){
          // 压缩图片需要的一些元素和对象
          var files = event.target.files || event.dataTransfer.files || [];//可能多张[]
          //var file = this.files[0],
          var file = files[0],
                  reader = new FileReader(),
                  img = new Image();
          var Orientation = null;

          if (file.type.indexOf("image") == 0 && file) {//
                  vm.isSelectedAPicture = true;
                  EXIF.getData(file, function() {
                          Orientation = EXIF.getTag(this, 'Orientation');
                  });

                  reader.readAsDataURL(file);//读作url后，把file对象存在了reader中,file转为base64url

                  reader.onload = function(e){
                          img.src = e.target.result;//转化为base64的url字符表示 ,img就可以用在src中

                          // ∵上面设置了base64形式的src所以，img重新onload。--PS:期间可以优化读取img的宽高（使用setInterval）
                          img.onload = function () {
                                  var imgWidth = this.width,
                                          imgHeight = this.height;
                                  var maxw = 750,maxh = 1334;

                                  if (imgWidth > imgHeight && imgWidth > maxw) {
                                          imgWidth = maxw;
                                          imgHeight = Math.ceil(maxw / this.width *  imgHeight);
                                  } else if (imgWidth < imgHeight && imgHeight > maxh) {
                                          imgWidth = Math.ceil(maxh /this.height * this.width);
                                          imgHeight = maxh;
                                  }

                                  var canvas = document.createElement("canvas"),
                                          ctx = canvas.getContext('2d');
                                  canvas.width = imgWidth;