vue3中图片转换base64

在Vue3中，可以使用以下方法将图片转换为base64格式：

1. 使用Vue指令：
在Vue3中，可以使用自定义指令来实现图片转换为base64格式的功能。首先，在Vue实例中注册一个全局的自定义指令，然后在需要转换的图片元素上使用该指令即可。

// 在main.js或其他入口文件中注册指令
app.directive('toBase64', {
  mounted(el) {
    const image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = el.src;
    image.onload = function() {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL("image/png"); // 根据需要设置图片格式
      el.src = base64;
    };
  }
});

<!-- 在需要转换的图片元素上使用指令 -->
<template>
  <img src="图片路径" v-to-base64>
</template>

2. 使用方法：
另一种方法是在Vue实例中定义一个方法来实现图片转换为base64格式的功能。首先，创建一个全局的方法，然后在需要转换的图片加载完成后调用该方法即可。

// 在Vue实例中定义全局方法
methods: {
  getBase64Image(url) {
    const image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = url;
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      const base64 = canvas.toDataURL("image/png"); // 根据需要设置图片格式
      console.log(base64); // 输出base64字符串，可以根据需求进行后续操作
    };
  }
},
mounted() {
  this.getBase64Image("图片路径");
}