Vue3自定义 hooks 配合canvas实现图片转base64

前置知识： 

1.HTMLCanvasElement.toDataURL()会将canvas转为base64格式的字符串

2.CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight)的用法

// 在src/hooks/index.ts中
import { onMounted } from "vue";
// 这里的elStr是用来作为选择器来选择图片的，所以要为存在标签，类名，id等选择器
export default (elStr: string): Promise<{ dataURL: string }> => {
  return new Promise((resolve) => {
    onMounted(() => {
      let img: HTMLImageElement = document.querySelector(
        elStr
      ) as HTMLImageElement;
      img.onload = () => {
        resolve({ dataURL: toBase64(img) });
      };
      function toBase64(img: HTMLImageElement) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 注：这里的格式由你引入的图片格式决定，如image/jpg,image/png等
        return canvas.toDataURL("image/png");
      }
    });
  });
};

使用：例如在main.js中引入自定义该 hook 使用，注：自定义hook尽可能使用use作为开头。

// 在main.js中
import useBase64 from "@/hooks";
useBase64(".ai").then((res) => {
  console.log(res.dataURL);
});

之后就会在控制台打印出图片转为的base64格式的字符串。

图片转为base64格式会增加其体积，但是同时不会向服务器发送网络请求，我们转base64格式都是会转一些图片体积较小的图片，转为base64格式也不会大幅增加其体积。