前端手机拍照后对图片压缩，iOS图片旋转处理

拍照

拍照可以直接使用input标签,并加上capture="camera"，点击input的时候就会直接打开相机

但是在部分低版本的iOS系统上，capture="camera"不会生效，会有相册和拍照让你选择

获取图片

拍照完成后会触发change事件，upload方法的参数是个event事件对象
event.target.files[0]就是你拍照后的图片file对象

upload (event) {
     let file = event.target.files[0]   
}

对图片压缩处理

// 因为公司的需求是拍照时不能让用户选择图片，iOS部分版本不支持，所以在iOS上只能用微信jssdk的拍照功能，拍照后只能获取到图片的dataURL，要将其转换成file对象，传入ios为true时表示在iOS上特殊处理
 function compress = (files, fn, ios) => {
    // 对不支持canvas上的toBlob方法的浏览器兼容处理
    if (!HTMLCanvasElement.prototype.toBlob) {
      Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
        value: function (callback, type, quality) {
          let dataURL = this.toDataURL(type, quality).split(",")[1];
          setTimeout(function () {
            let binStr = atob(dataURL);
            let len = binStr.length;
            let arr = new Uint8Array(len);

            for (let i = 0; i < len; i++) {
              arr[i] = binStr.charCodeAt(i);
            }

            callback(new Blob([arr], { type: type || "image/png" }));
          });
        }
      });
    }
    let file = files;
    if (ios === true) {
      function dataURLtoFile(dataurl) {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      }
      file = dataURLtoFile(file);
    }
    let Orientation = null;
    let img = new Image();
    // 创建读取文件对象
    let render = new FileReader();

    // 找到canvas,准备画图
    let canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");

    if (file.type.indexOf("image") !== -1) {
      // 读取file文件,得到的结果为base64位
      render.readAsDataURL(file);
    }
    // 要对图片旋转，需要获取当前图片的信息，需要引入exif插件，可以直接在入口index.html用CDN引入
    //  
    
   // 获取图片信息
    EXIF.getData(file, function () {
      Orientation = EXIF.getTag(this, "Orientation");
    });
    render.onload = function (result) {
      // 把读取到的base64图片设置给img的src属性
      let src = render.result;
      img.src = src;
    };

    img.onload = function () {
      // 加载完毕后获取图片的原始尺寸
      let origin_width = this.width;
      let origin_height = this.height;
      // 设置最大允许宽高,根据需求自己设置,值越大,图片大小越大
      let max_width = 400;
      let max_height = 400;

      // 最终宽高
      let imgWidth = origin_width;
      let imgHeight = origin_height;
      if (origin_width > max_width || origin_height > max_height) {
        if (origin_width / origin_height > max_width / max_height) {
          imgWidth = max_width;
          imgHeight = Math.round(max_width * (origin_height / origin_width));
        } else {
          imgHeight = max_height;
          imgWidth = Math.round(max_height * (origin_width / origin_height));
        }
      }
      canvas.width = imgWidth;
      canvas.height = imgHeight;
      if (Orientation && Orientation != 1) {
        switch (Orientation) {
          case 6: // 旋转90度
            canvas.width = imgHeight;
            canvas.height = imgWidth;
            context.rotate(Math.PI / 2);
            // (0,-imgHeight) 从旋转原理图那里获得的起始点
            context.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
            break;
          case 3: // 旋转180度
            context.rotate(Math.PI);
            context.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
            break;
          case 8: // 旋转-90度
            canvas.width = imgHeight;
            canvas.height = imgWidth;
            context.rotate((3 * Math.PI) / 2);
            context.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
            break;
        }
      } else {
        context.drawImage(this, 0, 0, imgWidth, imgHeight);
      }
      
      // 此处toBlob方法在iOS上有兼容问题，已做处理
      // toBlob第一个参数是回调函数，第二个参数是要转换的格式，第三个是转换的图片的质量0~1
      canvas.toBlob(function (result) {
        // 用回调函数将处理的结果返回出去
        fn(result);
      }, "image/jpg", 0.9);
    };
  },

最后调用compress方法即可

upload (event) {
   let file = event.target.files[0]
   compress(file,(files) => {
    let finalFile = files //最后得到压缩后的file对象
    })
}