javascript图片压缩

方法1.可以使用Canvas API来完成

        const img = new Image();
        const quality = 0.6; // 图像质量
        const canvas = document.createElement("canvas");
        const drawer = canvas.getContext("2d");
        img.src = res;
        img.onload = function () {
          canvas.width = img.width;
          canvas.height = img.height;
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
          // console.log(canvas.toDataURL("image/jpeg", quality));
          const base64 = canvas.toDataURL("image/jpeg", quality);
        };

方法2:compressorjs

npm install compressorjs

import Compressor from "compressorjs";

export function compressorImage(file) {
  return new Promise((resolve, inject) => {
    new Compressor(file, {
      quality: 0.6,
      maxWidth: 2048,
      mimeType: "image/jpeg",
      // The compression process is asynchronous,
      // which means you have to access the `result` in the `success` hook function.
      success(result) {
        console.log("result", result);//blob格式
        resolve(result);
      },
      error(err) {
        inject(err.message);
      },
    });
  });
}