Vue3+TypeScript学习笔记（二十六）

hook是Vue3的新特性，和Vue2的minxin非常像，但相比minxin其不覆盖同名变量，按需引入的方式使其更适合频繁使用，除了Vue原生的hook函数(useAttr()等)外，useVue也提供了一系列强大的hook函数，本节演示如何使用hook函数将图片转为base64编码

App.vue

<template>
    <img src="./assets/test1.jpg" alt="" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import useBase64 from './hooks/useBase64'

useBase64('img').then((res: string) => {
    console.log(res)
})
</script>

<style scoped></style>

canvas.drawImage共有三种参数列表：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

其中，image规定要使用的图像、画布或视频，dx、dy表示开始剪切的图像xy坐标，均为0则剪切完整图像，dWidth和dHeight表示image在目标画布上绘制的宽高，更多参数解析请参考MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

useBase64.ts

import { onMounted } from 'vue'

// 默认导出一个函数,返回一个Promise对象,Promise中的泛型类型表示其resolve时返回的数据类型
// 这里option的值是'img'
export default function (option: string): Promise<string> {
    return new Promise((resolve) => {
        onMounted(() => {
            let img = document.querySelector(option) as HTMLImageElement
            img.onload = () => {
                resolve(base64(img))
            }
        })
    })
}

// 借助canvas画布将图片转为base64编码
const base64 = (img: HTMLImageElement) => {
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
    return canvas.toDataURL('img/png')
}