vue 图片转base64（自定义hook）

1. js部分，直接调用函数

type options = {
  el: string
}
export default (options: options): Promise<{ baseUrl: string }> => {
  return new Promise((resolve) => {
    onMounted(() => {
      let img: HTMLImageElement = document.querySelector(
        options.el
      ) as HTMLImageElement
      console.log('el', img)
      img.onload = () => {
        resolve({
          baseUrl: base(img)
        })
      }
    })
    // 转换成base64文件
    const base = (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)
        // image/jpeg可以动态匹配png
      return canvas.toDataURL('image/jpeg')
    }
  })
}

 2. 文件中使用

<template>
  <div class="">
    <img id="imgs" class="imgs" src="../../assets/34.jpeg" alt="">
  </div>
</template>

<script setup lang="ts">
import useBase from './useBase';
useBase({el: '#imgs'}).then(res=> {
  console.log('res', res.baseUrl)
})
</script>