uniapp canvas生成贺卡

```php

```javascript
<template>
	<view class="page">



		<canvas class="canvas" :style="{width: canvasW + 'px', height: canvasH + 'px'}" canvas-id="myCanvas"></canvas>


	</view>

</template>

<script>
	export default {
		data() {
			return {


				canvasW: 390,
				canvasH: 750,
				
				
				canvasW2: 400,
				canvasH2: 400,
				
				objInfo: {
					bgImg: '../../static/jhy/diy/bg (2).png',
					name: '李白',
					toname: '杜甫的爸爸吧',
					ziImg:'../../static/jhy/diy/1.png',
				},
				canvasImg:''

			}
		},
		onLoad() {

            
          this.btn();
		},
		methods: {


			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			btn() {
				this.poster();
			},
			async poster() {
				var _this = this;
				var info = await _this.getImageInfo(_this.objInfo.bgImg);
				var info2 = await _this.getImageInfo(_this.objInfo.ziImg);
				
				if (info.errMsg == 'getImageInfo:ok') {
					uni.showToast({
						icon: 'loading',
						mask: true,
						duration: 3000,
						title: '海报绘制中',
					});
					var name = _this.objInfo.name;
					var qrcode = info.path;
					var qrcode2 = info2.path;
					
					var toname = _this.objInfo.toname;
					setTimeout(() => {
						// 创建画布对象
						const ctx = uni.createCanvasContext('myCanvas', this);
						// 清除背景
						ctx.clearRect(0, 0, _this.canvasW, _this.canvasW);
						// 绘制背景
						ctx.fillStyle = "#fff";
						ctx.fillRect(0, 0, _this.canvasW, _this.canvasW);
						// 绘制文本

						var widthImg1 = (_this.canvasW - 162) / 2;
						// 图片
						// drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
						// dx和dy是image在canvas中定位的坐标值
						// dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值
						// sx和sy是image所要绘制的起始位置
						// sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值
						
						console.log('info',info)
						
						ctx.drawImage(qrcode, 0, 0,info.width, info.height,0,0,info.width/3.2,
							info.height/3.2);
							
						ctx.drawImage(qrcode2, 0, 0, info2.width, info2.height, 60, 350, info2.width, info2.height);	
							
						ctx.font = "15px Medium"; // 字体大小
						ctx.fillStyle = '#CD0000'; //字体填充颜色
						var widthText1 = ctx.measureText(toname).width;
						var start1 = (_this.canvasW2 - widthText1)/4 ;
						ctx.fillText(toname+':', start1, 330);
						
						ctx.font = '15px Medium'; // 字体大小
						ctx.fillStyle = '#CD0000'; // 字体填充颜色
						var widthText2 = ctx.measureText(name).width;
						var start2 = _this.canvasW2 - widthText2-100 ;
						ctx.fillText(name, start2, 550)	
							
						ctx.stroke();

						ctx.beginPath();
						//ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2, false);
						ctx.clip();
						//ctx.strokeStyle = "#ff6352"; // 改变边框颜色
						ctx.stroke();
						ctx.draw(true, (ret) => {
							uni.showToast({
								icon: 'success',
								mask: true,
								title: '绘制完成',
							});
							uni.canvasToTempFilePath({ // 保存canvas为图片
								width: _this.canvasW,
								height: _this.canvasH,
								destWidth: _this.canvasW * 2, //此处需放大2倍，不然保存的图失真
								destHeight: _this.canvasH * 2,
								canvasId: 'myCanvas',
								quality: 1,
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									_this.canvasImg = res.tempFilePath;
									


									

									console.log(_this.canvasImg)

								},
							})
						})
					}, 1000)
				}
			}
		},






	}
</script>


<style>
	.page {
		width: 100%;
		height: 100%;

	}

	html,
	body {

		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}


	.canvas {
		position: absolute;
		z-index: -1;
		/* background-color: #4CD964; */
	}
</style>