本地图片进行压缩

一、图片文件转成base64

let reader = new FileReader();
reader.onload = function (evt) {
     const base64 = evt.target.result;// 异步拿到base64
};
reader.readAsDataURL(file); // file是图片文件

二、压缩图片（可以在压缩图片前，判断图片为多大，再决定是否压缩）

let img = new Image();
img.src = base64;
img.onload = function () {
	// console.log("加载完成，图片宽高：", img.width, img.height);
	let canvas = document.createElement('canvas');
	canvas.width = img.width;
    canvas.height = img.height;
    const context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 压缩图片   base64Src 就是最终压缩出来的base64
    const base64Src = canvas.toDataURL('image/jpeg', 0.1);// 0-1调整压缩质量
}

ps：查看图片大小（单位为KB）

function showSize (base64url) {
      //把头部去掉
      var str = base64url.replace('data:image/png;base64,', '');
      // 找到等号，把等号也去掉
      var equalIndex = str.indexOf('=');
      if (str.indexOf('=') > 0) {
        str = str.substring(0, equalIndex);
      }
      // 原来的字符流大小，单位为字节
      var strLength = str.length;
      // 计算后得到的文件流大小，单位为字节
      var fileLength = parseInt(strLength - (strLength / 8) * 2);
      // 由字节转换为kb
      var size = "";
      size = (fileLength / 1024).toFixed(2);
      var sizeStr = size + ""; //转成字符串
      var index = sizeStr.indexOf("."); //获取小数点处的索引
      var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
      if (dou == "00") { //判断后两位是否为00，如果是则删除00                
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    }