1. 定义一个 将图片转换成 base64 格式的 hook

import { onMounted } from "vue"

type Options = {
    el: string
}

//  hooks 中暴露一个函数
// 此函数参数为 options{el:''}，返回值是一个 Promise 对象
// 作用是 将小图片转换成 base64 格式
export default function (options: Options): Promise<{ baseUrl: string }>  {
    return new Promise((resolve) => {
        onMounted(() => {
            // 根据传入的 CSS 选择器获取元素
            let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
            console.log(img)  // 获取到的真实 DOM 元素
            // 当元素加载完成后，resolve 一个对象，里面包含的就是图片 base64 格式的字符串
            img.onload = () => {
                resolve({
                    baseUrl: base64(img)
                })
            }
        })
    
        // 转换成 base64 的操作，借助 canvas
        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('imgs/jpg', 0.8)
        }
    })
}

其中 drawImage 接收的参数如下

2. 使用上面定义的 hook

<template>
<img id="img" src="./assets/imgs/img1.jpg" alt="">
</template>

<script setup lang="ts">
// 默认：hooks 都用 use 开头
import useBase64 from './hooks/base64'

// 调用 hook，返回的是一个 Promise 对象
useBase64({el: '#img'}).then(res => {
    console.log(res.baseUrl)
})
</script>

<style scoped>

</style>