在 react js 中将其转换为 base64 格式时是否可以减小图像大小？

Question

我正在使用andt上传组件同时上传多张图片。 但是在上传大尺寸图像时会引起问题。 转换 base64 格式的图像时，有什么方法可以减小图像大小。

这是我的上传组件

<Upload
       name="Upload"
       listType="picture-card"
       className="avatar-uploader"
       showUploadList={false}
       maxCount={20}
       multiple
       onPreview={onPreview}
       beforeUpload={beforeUpload}
       onChange={handleChange}
       >

这里我叫 base64 function

getBase64(info.file.originFileObj, imageUrl =>
          base64Image(imageUrl),
    );

function 转换成 base64

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
 }
        

Answer 1

异步 function 将字符串图像源从 react-image-file-resizer 库转换为 base64 uri。 您可以在图片上传位置使用 function 中的 base64 文件 function。

import React from "react";
import Resizer from "react-image-file-resizer";

export default async function base64File(
      src: string,
    ): Promise<string | ArrayBuffer | null> {
      const data = await fetch(src);
      const blob = await data.blob();
    
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      Resizer.imageFileResizer(
        blob,
        1500,
        1500,
        JPEG,
        1500,
        0,
        (uri) => {
          return resolve(uri as string);
        },
        "base64",
        200,
        200
      );
    };
  });
}


base64File("image_source" ).then((dataURL) => {})