前端压缩图片代码，支持移动端和pc 端，还有拍照后获取到的照片

1. upload   使用者调用的方法

2. rotateImg  旋转照片，用于把iOS拍照后获取到的图片摆正

3. dataURLtoFile 将压缩后的图片转为file 对象，区分一个 blob 和 base64, 兼容哪个就用哪个

4. 得先引入  exif-js  用于拿到图片信息，确定 iOS 怎么旋转的

/* 
    // 先安装  exif-js


    // 监听change事件 
    let file, obj
    document.querySelector('input[type=file]').addEventListener('change', function (e) {
      if (e.target.files[0].size / 1024 / 1024 > 20) {
        alert('上传的照片太大了')
        return 
      }
      upload(e, uploadCallback)
    })

    // file  新的表单值，可能是个Blob, 
    // obj:{headerImage: '', imgName: ''} headerImage 是base64图片,用于预览上传的图片
    function uploadCallback (file, obj) {
    
    let formData = new FormData()
    formData.append("fileData", file, 'projectname' + new Date().getTime() +'.png')
    }

*/
import EXIF from 'exif-js'
let picValue = null,
  headerImage = '',
  imgName = ''
const MAXSIZE = 1024 * 1024 / 5 // 大于这个值继续压缩 200k
const IMAGEWIDTH = 750 // 重新定义图片宽度,小于这个值就使用原始宽度，防止图片被放大失真

// 上传
function upload(e, cb) { // 入参 1. file change事件中的事件对象， 2. 回调函数
  let files = e.target.files || e.dataTransfer.files;
  if (!files.length) return;
  picValue = files[0];
  imgName = picValue.name
  return imgPreview(picValue, cb);
}

// ios 拍摄的照片可能需要旋转方向使图片方向正常
function rotateImg(img, rotateDegree, canvas) {
  //最小与最大旋转方向，图片旋转4次后回到原方向    
  if (img == null) return;
  //img的高度和宽度不能在img元素隐藏后获取，否则会出错    
  let height = img.height;
  let width = img.width;
  //旋转角度以弧度值为参数    
  let degree = rotateDegree * Math.PI / 180;
  let ctx = canvas.getContext('2d');
  switch (rotateDegree) {
    case 0:
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0);
      break;
    case 90:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, 0, -height);
      break;
    case 180:
      canvas.width = width;
      canvas.height = height;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, -height);
      break;
    case 270:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, 0);
      break;
  }
}

// canvas压缩图片
function compress(img, Orientation, cb) {
  let obj = {}
  let that = img
  Orientation = Orientation ? Orientation : ''
  obj.width = IMAGEWIDTH ? (that.width > IMAGEWIDTH ? IMAGEWIDTH : that.width) : obj.width
  // 默认按比例压缩
  let w = that.width,
    h = that.height,
    scale = w / h;
  w = obj.width || w;
  h = obj.height || (w / scale);
  let quality = .7; // 默认图片质量为0.7
  //生成canvas
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(255, 255, 255, 0)';
  // 创建属性节点
  let anw = document.createAttribute("width");
  anw.nodeValue = w;
  let anh = document.createAttribute("height");
  anh.nodeValue = h;
  canvas.setAttributeNode(anw);
  canvas.setAttributeNode(anh);
  ctx.drawImage(that, 0, 0, w, h);
  // 图像质量
  if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
    quality = obj.quality;
  }
  if (Orientation && Orientation != 1) {
    switch (Orientation) {
      case 6: //需要顺时针（向左）90度旋转
        rotateImg(that, 90, canvas);
        break;
      case 8: //需要逆时针（向右）90度旋转
        rotateImg(that, 270, canvas);
        break;
      case 3: //需要180度旋转
        rotateImg(that, 180, canvas); //转两次
        break;
    }
  }
  //进行最小压缩
  let ndata = canvas.toDataURL('image/jpeg', quality);
  if (calcBase64ImgSize(ndata) > MAXSIZE) {
    let img2 = new Image();
    img2.src = ndata;
    img2.onload = function () {
      compress(img2, '', cb)
    }
  } else {
    headerImage = ndata;
    try {
      cb(dataURLtoFile(headerImage, imgName), {
        headerImage,
        imgName
      })
    } catch (error) {
      console.error(error.message);
    }
  }
}

// 转为file对象
function dataURLtoFile(dataurl, filename) {
  try {
    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);
    }
    let file = new File([u8arr], filename, {
      type: mime
    });
    console.log('base64')
    return file
  } catch (error) {
    console.error(error);
    alert('您的手机不支持上传图片')
  }
}

// 先看图片大小，小的话直接上传，太大就压缩
function imgPreview(file, cb) {
  // let self = this;
  let Orientation;
  //去获取拍照时的信息，解决拍出来的照片旋转问题
  EXIF.getData(file, function () {
    Orientation = EXIF.getTag(this, 'Orientation');
    // alert(Orientation)
  });
  // 看支持不支持FileReader
  if (!file || !window.FileReader) return;

  if (/^image/.test(file.type)) {
    // 创建一个reader
    let reader = new FileReader();
    // 将图片2将转成 base64 格式
    reader.readAsDataURL(file);
    // 读取成功后的回调
    reader.onloadend = function () {
      let result = this.result;
      let img = new Image();
      img.src = result;
      //判断图片是否大于50K,是就直接上传，反之压缩图片
      if (calcBase64ImgSize(result) <= 51200) {
        headerImage = this.result;
        cb(dataURLtoFile(headerImage, imgName), {
          headerImage,
          imgName
        })
        return
      } else {
        img.onload = function () {
          compress(img, Orientation, cb);
        }
      }
    }
  }
}

// 计算base64图片大小
function calcBase64ImgSize (imgUrl) {
  var eqTagIndex=imgUrl.indexOf("=");
  imgUrl=eqTagIndex!=-1?imgUrl.substring(0,eqTagIndex):imgUrl;
  var strLen=imgUrl.length;
  return strLen-(strLen/8)*2
}
export default upload

 

 

以上