Vue: 自定义hooks转img为base64

import { onMounted } from 'vue'


type Options = {
  elem: string
}

const base64 = (elem: HTMLImageElement) => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext(('2d'))
  canvas.width = elem.width
  canvas.height = elem.height
  ctx?.drawImage(elem, 0, 0, canvas.width, canvas.height)
  return canvas.toDataURL('image/png')
}
export default function (options: Options): Promise<{ baseUrl: string }> {
  return new Promise(resolve => {
    onMounted(() => {
      const imgElement: HTMLImageElement = document.querySelector(options.elem) as HTMLImageElement
      console.log(imgElement)
      imgElement.onload = () => {
        resolve({
          baseUrl: base64(imgElement)
        })
      }
    })
  })
}

App.vue

A.vue