js-压缩图片

压缩图片代码量有点大，先奉上封装代码再慢慢解释。

这里通过等比缩小图片的长宽以达到减小图片大小的目的。

//控制是否继续压缩，考虑到压缩后的图片避免再压缩
var flag = false;
let suofang = function(base64, bili, callback) {//传入图片的base64、压缩比例、回调
  //处理缩放，转格式
  let _img = new Image();//新建一个image对象
  _img.src = base64;//image对象里塞入传入的图片base64
  _img.onload = function() {//img预启动后执行
    let _canvas = document.createElement("canvas");//压缩图片操作基于canvas
    var w1 = this.width;//宽度高度赋值
    var h1 = this.height;
    _canvas.setAttribute("width", w1);
    _canvas.setAttribute("height", h1);
    _canvas.getContext("2d").drawImage(this, 0, 0, w1, h1);
    let base64_1 = _canvas.toDataURL("image/jpeg");
    _canvas.toBlob(function(blob) {//将canvas对象转换成blob查看信息
      if (blob.size <= 1024 * 1024 * 2) {//如果在一定的大小内 则返回原大小的blob，并且不让脚本继续向下执行
        callback(blob, base64_1);
        flag = true;
      }
    }, "image/jpeg");
    if (flag == true) {
      flag = false;
      return;
    }
    // 此处往下是图片大小超出指定大小,开始缩小图片
    var w = this.width / bili;
    var h = this.height / bili;
    _canvas.setAttribute("width", w);
    _canvas.setAttribute("height", h);
    _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
    var base64 = _canvas.toDataURL("image/jpeg");
    _canvas.toBlob(function(blob) {//将canvas对象转换成blob查看信息
      if (blob.size > 1024 * 1024 * 2) {//如果还是超过指定大小则递归
        suofang(base64, bili, callback);
      } else {
        callback(blob, base64);//如果不超过指定大小则回调blob以及base64
      }
    }, "image/jpeg");
  };
};

这里只是把工作中学习到的代码在这里做下记录，因为当时该逻辑没有花太多心思，存在很多可以做简化操作的地方，还望大家见谅。亲测有效。后期有机会，我会保留该文并在后面继续更新我这里的改动。

如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。