js实现压缩base64格式的图片(刚刚抄了半天才实现的需求,方便你我他)

压缩方法,可以直接用亲测有效(刚写完需求所以肯定好使)

//压缩方法
function dealImage(base64, w, callback) {
  var newImage = new Image();
  var quality = 0.6; //压缩系数0-1之间
  newImage.src = base64;
  newImage.setAttribute("crossOrigin", "Anonymous"); //url为外域时需要
  var imgWidth, imgHeight;
  newImage.onload = function () {
    imgWidth = this.width;
    imgHeight = this.height;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w;
        canvas.height = (w * imgHeight) / imgWidth;
      } else {
        canvas.height = w;
        canvas.width = (w * imgWidth) / imgHeight;
      }
    } else {
      canvas.width = imgWidth;
      canvas.height = imgHeight;
      quality = 0.6;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
    callback(base64); //必须通过回调函数返回,否则无法及时拿到该值
  };
}

上面代码直接cv大法
实际应用

//这是原来的base64格式字符串
var base64= path;
//这就是你压缩之后的字符串
var str;
//你可以打桩看一下有多长
console.log(base64.length);
//然后调用压缩方法 第一个参数就是原来的字符串,第二个是宽度,第三个就是回调方法,也就是压缩函数最后面那个callback(base64)
dealImage(base64, 500, useImg);
//然后一压 再打个桩看下长度 方法名随便起怎么舒服怎么来
function useImg(base64) {
       str= base64;
       console.log(str.length);
}

单张图片就直接再回调函数里写ajax请求就完事儿了
多张的话最好是循环调用回调方法把压缩后的字符串都取出来再写请求


评论