前端js压缩图片

export const compressBase64Image = (base64, maxSizeInKb, callback) => {
  const img = new Image();
  img.src = base64;

  img.onload = function () {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    // 初始的质量值
    let quality = 1// 0.92; // 质量从0.0到1.0

    // 计算缩放比例
    // let scale = 1//Math.sqrt(maxSizeInKb * 1024 / (img.width * img.height * 4));
    // if (scale < 1) {
    //     canvas.width = img.width * scale;
    //     canvas.height = img.height * scale;
    // } else {
    canvas.width = img.width;
    canvas.height = img.height;
    // }

    // 绘制图像到canvas
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    function compressAndCheckSize() {
      console.log(quality);

      canvas.toBlob(function (blob) {
        if (blob.size <= maxSizeInKb * 1024 || quality <= 0.1) {
          // 如果满足条件或者质量已经很低，则返回结果
          let reader = new FileReader();
          reader.onloadend = function () {
            callback(reader.result);
          };
          reader.readAsDataURL(blob);
        } else {
          // 否则降低质量并重试
          quality -= 0.01;
          canvas.toBlob(compressAndCheckSize, 'image/jpeg', quality);
        }
      }, 'image/jpeg', quality);
    }

    compressAndCheckSize();
  };
}


调用：

compressBase64Image(e.target.result, 100, function (compressedBase64) {
        src2.value = compressedBase64
});