uniapp如何生成自定义文字和图片的海报？

效果：

完整uniapp代码，兼容app、h5、小程序

<template>
	<view>
		<!-- 生成海报的点击事件 -->
		<view @click="generatePoster">点击分享</view>

		<!-- 生成海报的canvas -->
		<view class="my-canvas-box" @touchmove.stop.prevent v-show="show" @click="show = false">
			<canvas class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
			<view class="canvas-tip">长按可保存海报</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		methods: {
			// 生成海报
			generatePoster() {
				// 这里是创建 canvas 绘图上下文
				let context = uni.createCanvasContext('myCanvas');

				// 这里可以根据自己的需求显示加载动画
				uni.showToast({
					title: '正在生成海报，请稍后',
					icon: 'none',
					duration: 3000
				});
				// 小程序码图片，下面可以放一个请求，来保存小程序码。然后赋值到qrImg这个变量上面
				let qrImg = 'http://repo.bfw.wiki/bfwrepo/image/5f9e27c437f2a.png';

				// 给整个canvas填充白色背景（这个如果不加上的话，在APP端生成的海报没有白色背景）
				context.setFillStyle('#ffffff');
				context.fillRect(0, 0, 500, 900);
				context.draw();
				// 绘制用户昵称
				context.setFontSize(14);
				context.setFillStyle('#000000');
				// 这里根据自己的项目填写用户昵称的字段
				context.fillText('用户的昵称', 100, 48);
				context.setFontSize(12);
				context.setFillStyle('#999999');
				context.fillText('的分享', 100, 68);
				// 绘制价格
				context.setFontSize(18);
				context.setFillStyle('red');
				context.fillText(`￥199`, 20, 366);
				// 绘制商品名称，这里是调用一个方法，按字符串长度进行分割换行。【可以做一个优化】
				this.drawText("商品名称", 20, 379, context);
				// 绘制头像
				uni.d...

点击查看剩余70%