JavaScript实现图片压缩

 图片压缩

原理：使用canvas对象的drawImage()方法将Image对象压缩绘制到画板上。代码实现如下

    //图片压缩
    compress(
      base64, // 源图片
      rate = 1.5, // 缩放比例
      callback // 回调方法
    ) {
      //处理缩放，转格式
      var _img = new Image();
      _img.src = base64;

      _img.onload = function () {
        var _canvas = document.createElement("canvas");
        var w = this.width;
        var h = this.height;
        //设置条件
        if (w > 500 || h > 600) {
          w = this.width / rate;
          h = this.height / rate;
        }
        _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) {
          if (blob.size > 500 * 600) {
            //如果还大，继续压缩
            this.compress(base64, rate, callback);
          } else {
            callback(base64);
          }
        }, "image/jpeg");
      };
    },

工具库

compression.js：https://github.com/expressjs/compression

image-compressor：https://github.com/xkeshi/image-compressor

localResizeIMG：https://github.com/think2011/localResizeIMG