下载好依赖后，我们在需要使用的页面引入前提条件：此功能是在背景图上添加内容

（这是关于Vue生成图片的方式，目前只更新方法一，还有方法二直接用canvas把文字绘制到图片上目前没空整理，还有后端生成的方式这个比较考验服务器压力）

方式一 、先将图片文字走准备好，在分享或者下载的时候用canvan绘制成一张图片

1.我们先在vue项目中输入以下命令安装依赖

npm install --save html2canvas //上面不行可以用下面这个安装
pnpm install html2canvas

2.下载好依赖后，我们在需要使用的页面引入

import html2canvas from 'html2canvas';

3.在需要生成图片的盒子添加ref 或者id

<template><view id="test" ref="canvasImg"><uv-image width="750rpx" src="图片地址"  mode="widthFix"></uv-image><view class="content">文字信息</view></view><uv-buttontype="primary"text="保存"customStyle="margin-top: 10px"@click="submit"></uv-button>
</template>

4.创建方法 在保存时调用该方法 

<script setup>
async function convertToImage() {try {const element = document.getElementById('test');const canvas = await html2canvas(element).then((canvas)=>{const link = document.createElement('a');link.href = canvas.toDataURL('image/png');link.download = 'image.png';link.click();});} catch (e) {throw new Error(e);}
</script>