input上传文件手机拍照图片Canvas压缩上传后图片旋转问题解决

在做H5公众号项目的时候发现一个bug，ios图片上传会逆时针旋转90度，偶尔安卓也会这样，显然这不是我们想要的，开始以为是上传的阿里云服务器后旋转的，后来发现不是。在网上找了几种方式，最终选择插件EXIF.js来解决这个问题。

npm安装：npm install exif-js --save
Or Bower: bower install exif-js --save
引入使用：import { EXIF } from "exif-js"

重点来了：：：：：：

js:

 oversizeFunc(e) {
      let aFile = e.target.files[0];
      let _that = this;
      let reader = new FileReader();
      reader.readAsDataURL(aFile);
      reader.onloadstart = function() {
        console.info("开始读取");
      };
      reader.onprogress = function() {
        console.info("正在读取.....");
      };
      reader.onload = function(e) {
        if (aFile.size > 10 * 1024 * 1024) {
          _that.$toast("上传的图片大小超过10MB，无法上传");
          return false;
        }
        _that.uploadImg(this.result, aFile);
      };
      reader.onabort = function() {
        console.info("读取中断！！");
      };
      reader.onerror = function() {
        console.info("读取出现错误！！");
      };
      reader.onloadend = function() {
        console.info("FileReader读取步骤执行完毕");
      };
    },
    // 压缩图片
    uploadImg(e, filedata) {
      let aFile = e;
      let _that = this;
      let base64Url = e;
      console.log("aFile", aFile);
      let maxWidth = 800,
        maxHeight = 800;
      let img = new Image();
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");

      // base64地址图片加载完毕后
      img.onload = function() {
        // 图片原始尺寸
        let originWidth = this.width;
        let originHeight = this.height;
        console.log("originWidth", originWidth);
        // 目标尺寸
        let targetWidth = originWidth,
          targetHeight = originHeight;

        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }

        EXIF.getData(filedata, function() {
          EXIF.getAllTags(this);
          let orient = EXIF.getTag(this, "Orientation"); //判断需不需要旋转的值了，有1、3、6、8
          switch (orient) {
            case 6: //需要顺时针90度旋转
              canvas.width = targetHeight;
              canvas.height = targetWidth;
              context.rotate((90 * Math.PI) / 180);
              context.fillStyle = "#FFF";
              context.fillRect(0, 0, targetWidth, targetHeight);
              context.drawImage(
                img,
                0,
                -targetHeight,
                targetWidth,
                targetHeight
              );
              break;
            case 8: //需要逆时针90度旋转
              canvas.width = targetWidth;
              canvas.height = targetHeight;
              context.rotate((-90 * Math.PI) / 180);
              context.fillStyle = "#FFF";
              context.fillRect(0, 0, targetWidth, targetHeight);
              context.drawImage(
                img,
                -targetHeight,
                0,
                targetHeight,
                targetWidth
              );
              break;
            case 3: //需要180度旋转
              context.rotate((180 * Math.PI) / 180);
              context.fillStyle = "#FFF";
              context.fillRect(0, 0, targetWidth, targetHeight);
              context.drawImage(img, -originWidth, -originHeight);
              break;
            default:
              canvas.width = targetWidth;
              canvas.height = targetHeight;
              context.fillStyle = "#FFF";
              context.fillRect(0, 0, targetWidth, targetHeight);
              context.drawImage(img, 0, 0, targetWidth, targetHeight);
          }
          let base = canvas.toDataURL("image/jpeg", 0.92); //canvas转码为base64
          base64Url = base;
          console.log("imgfile.content", base64Url);
        //  base64Url = base64Url.split(",")[1]
          //上传后台 base64Url 
        });
      };
      img.src = base64Url;
    },

好了，经过测试达到了想要的效果，希望用到的小伙伴能够用得上，少走弯路。

路漫漫其修远兮，吾将上下而求索，每天进步一点点，加油！