vue3 压缩图片大小

   /**
   * 压缩图片大小，返回base64
   * @param file File对象
   * @param MAX_WIDTH 压缩后图片最大宽度
   * @param MAX_HEIGHT 压缩后图片最大高度
   */
  compressImage = (file: File, MAX_WIDTH = 800, MAX_HEIGHT = 600) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = event => {
        // callback(event.target.result);
        const img = new Image();
        img.src = event.target.result as string;
        img.onload = () => {
          const element = document.createElement("canvas");
          const context = element.getContext("2d");

          let width = img.width;
          let height = img.height;

          if (width > height) {
            if (width > MAX_WIDTH) {
              height *= MAX_WIDTH / width;
              width = MAX_WIDTH;
            }
          } else {
            if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;
            }
          }

          element.width = width;
          element.height = height;

          context.clearRect(0, 0, element.width, element.height);
          context.drawImage(img, 0, 0, width, height);

          element.toBlob(
            blob => {
              const reader = new FileReader();
              reader.readAsDataURL(blob);
              reader.onloadend = () => {
                const base64data = reader.result;
                resolve(base64data);
              };
            },
            file.type,
            0.7
          ); // 0.7 是图片质量，可以根据需要调整
        };
      };
      reader.onerror = reject;
    });
  };