vue3实现图片转base64的hooks

<script setup lang="ts">
import {ref,reactive} from 'vue'
import useBase64 from '../hooks'
let imgBaseUrl = ref('')
useBase64({
  el: '#img'
}).then(res => {
  imgBaseUrl.value = res.baseUrl
})
</script>
<template>
<div class=''>

  <p>src格式的图片</p>
  <img id="img" src="../assets/imgs/1.jpg" alt="">
  
  <p>base64格式的图片</p>
  <img :src="imgBaseUrl" alt="">
  
</div>
</template>

• src/hooks/index.ts

import { onMounted } from "vue"
type Options = {
  el: string
}
export default function (options: Options): Promise<{ baseUrl: string }> {
  return new Promise((resolve) => {
    onMounted(() => {
      let img: HTMLElement = document.querySelector(options.el) as HTMLElement
      img.onload = () => {
        resolve({
          baseUrl: base64(img)
        })
      }
      const base64 = (el: HTMLImageElement) => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = el.width
        canvas.height = el.height
        ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
        return canvas.toDataURL('image/png')
      }
    })
  })
}