base64图片压缩

方法

创建 dealImage.js 文件

var 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); //压缩语句
    // 如想确保图片压缩到自己想要的尺寸,如要求在100kb以下，请加以下语句，quality初始值根据情况自定
    while (base64.length / 1024 > 100) {
      quality -= 0.01;
      base64 = canvas.toDataURL("image/jpeg", quality);
    }
    callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
  }
}

export default dealImage

使用

import reduceImg from "@/utils/dealImage"
reduceImg(res,300,(res=>{  // base64图片，压缩尺寸，回调
  this.resultImg = res;
}))