vue 前端图片压缩

1.因为我们业务方面上传得图片会有很大，以至于10m以上，所以前端必须压缩，代码如下

function compressImage(file, config) {

  // eslint-disable-next-line no-unused-vars

  let src;

  // eslint-disable-next-line no-unused-vars

  let files;

  let fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)

  console.log("---------图片------大小--   ",fileSize);

  const read = new FileReader();

  read.readAsDataURL(file);

  const fileName = file.name;

  return new Promise(function (resolve, reject) {

    read.onload = function (e) {

      let img = new Image();

      img.src = e.target.result;

      img.onload = function () {

        // 默认按比例压缩

        let w = img.width;

        let h = img.height;

        // 生成canvas

        let canvas = document.createElement("canvas");

        let ctx = canvas.getContext("2d");

        let base64;

        // 创建属性节点

        canvas.setAttribute("width", w);

        canvas.setAttribute("height", h);

        ctx.drawImage(this, 0, 0, w, h);

        if(fileSize <=2)

        {

            base64 = canvas.toDataURL(file["type"], 1);

        }

        else if(fileSize >2 && fileSize < 5)

        {

           base64 = canvas.toDataURL(file["type"], 0.75);

        }

        else if(fileSize >5 && fileSize < 10)

        {

           base64 = canvas.toDataURL(file["type"], 0.55);

        }

        else if(fileSize >10 && fileSize < 50)

        {

           base64 = canvas.toDataURL(file["type"], 0.45);

        }

        else{

           base64 = canvas.toDataURL(file["type"], 0.25);

        }

       

        // 回调函数返回file的值（将base64编码转成file）

        files = dataURLtoFile(base64, fileName); // 如果后台接收类型为base64的话这一步可以省略

        // 回调函数返回file的值（将base64转为二进制）

        //let fileBinary = dataURLtoBlob(base64);

        resolve(files);

      };

    };

  });

} 

 

function dataURLtoBlob(dataurl) {

  let arr = dataurl.split(",");

  let mime = arr[0].match(/:(.*?);/)[1];

  let bstr = atob(arr[1]);

  let n = bstr.length;

  let u8arr = new Uint8Array(n);

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n);

  }

  return new Blob([u8arr], { type: mime });

}

// base64转码（将base64编码转回file文件）  此方法我没用到

// eslint-disable-next-line no-unused-vars

function dataURLtoFile(dataurl, fileName) {

  let arr = dataurl.split(",");

  let mime = arr[0].match(/:(.*?);/)[1];

  let bstr = atob(arr[1]);

  let n = bstr.length;

  let u8arr = new Uint8Array(n);

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n);

  }

  if (fileName) {

    return new File([u8arr], fileName);

  } else {

    return new File([u8arr], { type: mime });

  }

}