react图片转base64

在React中将图片转换为Base64格式有多种方法，以下是其中两种常用的方法：

方法一：使用FileReader对象

// 创建一个input[file]元素
const inputElement = document.createElement("input");
inputElement.type = "file";

// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  // 读取文件内容并转换为Base64格式
  reader.onloadend = () => {
    const base64String = reader.result;
    console.log(base64String);
  };

  reader.readAsDataURL(file);
});

// 触发文件选择事件
inputElement.click();

方法二：使用canvas元素

// 创建一个input[file]元素
const inputElement = document.createElement("input");
inputElement.type = "file";

// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
  const file = event.target.files[0];
  const image = new Image();

  // 读取文件内容并绘制到canvas上
  const reader = new FileReader();
  reader.onloadend = () => {
    image.src = reader.result;
  };
  reader.readAsDataURL(file);

  // 等待图片加载完成后获取Base64格式的图片数据
  image.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    const base64String = canvas.toDataURL("image/png");
    console.log(base64String);
  };
});

// 触发文件选择事件
inputElement.click();