在我们日常开发中想在图片上加文字并保存到手机或电脑上有很多方法：例如阿里云的添加文字水印。此章节采用vue3+Canvas绘制。vue2、vue3、react（写法有差异但逻辑不变）

创建cilck事件并创建一个canvas

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

创建loadImage()函数：功能是装载图标，光标，或位图。

loadImage(本地图片)
        .then((img) => {})
        .catch(() => {})

封装图片文字的尺寸，颜色，字体

loadImage(本地图片)
        .then((img) => {
            const drawText = (
                text: string,
                size = 20,
                x: number,
                y: number
            ) => {
                ctx!.font = `${size}px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`
                ctx!.fillStyle = 'rgba(0, 0, 0, 1)'
                ctx?.fillText(text, x, y)
            }
        })
        .catch(() => {})

设置canvas画布的宽高。drawImage()设置图片在画布的起始坐标点

loadImage(本地图片)
        .then((img) => {
            const drawText = (
                text: string,
                size = 20,
                x: number,
                y: number
            ) => {
                ctx!.font = `${size}px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`
                ctx!.fillStyle = 'rgba(0, 0, 0, 1)'
                ctx?.fillText(text, x, y)
            }
            
            canvas.width = img.width
            canvas.height = img.height
            ctx?.drawImage(img, 0, 0, img.width, img.height)
        })
        .catch(() => {})

在图片上绘制文字drawText(文本,尺寸,x轴,y轴)（事件外层创建一个变量用于存放生成好的图片）

loadImage(本地图片)
        .then((img) => {
            const drawText = (
                text: string,
                size = 20,
                x: number,
                y: number
            ) => {
                ctx!.font = `${size}px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`
                ctx!.fillStyle = 'rgba(0, 0, 0, 1)'
                ctx?.fillText(text, x, y)
            }
            
            canvas.width = img.width
            canvas.height = img.height
            ctx?.drawImage(img, 0, 0, img.width, img.height)
            
            drawText("文字1", 70, 410, 1170)
            drawText("文字2", 70, 2610, 1026)
            
            certificateImage.value = canvas.toDataURL('image/png')
        })
        .catch(() => {
            certificateImage.value = ''
        })

最后

<template>
    <div>
        <img
           v-if="certificateImage"
           :src="certificateImage"
        />
    </div>
</template>
<script setup lang="ts">

const certificateImage = ref('')

const drawCertificate = async () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    loadImage(certificate)
        .then((img) => {
            const drawText = (
                text: string,
                size = 20,
                x: number,
                y: number
            ) => {
                ctx!.font = `${size}px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif`
                ctx!.fillStyle = 'rgba(0, 0, 0, 1)'
                ctx?.fillText(text, x, y)
            }
            
            canvas.width = img.width
            canvas.height = img.height
            ctx?.drawImage(img, 0, 0, img.width, img.height)

            drawText("文字1", 70, 410, 1170)
            drawText("文字2", 70, 2610, 1026)
            
            certificateImage.value = canvas.toDataURL('image/png')
        })
        .catch(() => {
            certificateImage.value = ''
        })
}

onMounted(async () => {
    drawCertificate()
})


<script/>