vue压缩base64图片方法 【Javascript】

?

//压缩方法

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 = 160;

      imgHeight = 90;

      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); //压缩语句

      // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定

      // while (base64.length / 1024 > 150) {

      //  quality -= 0.01;

      //  base64 = canvas.toDataURL("image/jpeg", quality);

      // }

      // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑

      // while (base64.length / 1024 < 50) {

      //  quality += 0.001;

      //  base64 = canvas.toDataURL("image/jpeg", quality);

      // }

      callback(base64);//必须通过回调函数返回，否则无法及时拿到该值，return拿不到

  }

}

　　

?

1 2 3 4 5 6 7 8

// 调用方法 let base64 = res.data; //传入base64变量 console.log(base64.length, '11',base64); // 打印原长度 vm.dealImage(base64, 150, useImg); function useImg(data){   vm.formValidate.img = data   console.log(vm.formValidate.img.length, '22',vm.formValidate.img); // 打印压缩长度 }