uni-app制作海报并转发

实现这个效果的第一步
这是要用到的函数

// 用于请求图片
uni.getImageInfo()
// 获取画布
 uni.createCanvasContext("firstCanvas")
// 像画板中添加图片
ctx.drawImage(result.path, uni.upx2px(144), uni.upx2px(705), uni.upx2px(470), uni.upx2px(470))
// 像素换算
upx2px()
// 添加文字  可以控制文字的颜色  大小
let fontSizea = 18;
ctx.font = `${fontSizea}px Arial`;//绘制文字
ctx.fillStyle = '#FFFFFF'
ctx.fillText(`邀请码： ${yao}`,uni.upx2px(250), uni.upx2px(613));
// 绘画
ctx.draw(true,()=>{
	uni.canvasToTempFilePath({
		canvasId: 'firstCanvas',
		success: (res) => {
			// 在H5平台下，tempFilePath 为 base64
			this.posterUrL = res.tempFilePath;
			uni.hideLoading();
            // 这个就是分享的地址   使用了本地存储（也是分享好友，朋友圈的地址）
			uni.setStorageSync('person-card',this.posterUrL);
		}
	})
})

具体步骤

			方法
			create() {
				//  
				this.canvasShow = true
				//  画布上的文字 可以是动态的 这里好像是有 this 指向的问题多以我就先获取了
				let yao = this.auth
				let surl = this.url
				// 请求图片 这里用到了两个这个函数 是因为请求了两个图片记住   一定要先请求底部的图片 在请求上面的图片  不然会被覆盖  
				//不知道是不是 但是有人这么说了  我也就没有反着来
				uni.getImageInfo({
				// 可以是临时路径也可以是永久路径  或者是网上路径 都可以
					src: "../../static/hp.jpg",
					success(result) {
					// 获取画布 写自己的变量
						let ctx = uni.createCanvasContext("firstCanvas")
						// 向画布中添加图片  位置  左  右    宽       高
						ctx.drawImage(result.path, 0, 0, uni.upx2px(759), uni.upx2px(1400))
						 // 获取第二个图片
						uni.getImageInfo({
						// 可以是应用的的变量
							src:surl,
						// 也可以线上的地址
							// src: "http://photogz.photo.store.qq.com/psc?/V13cH3Mw0ZY3dr/05RlWl8gsTOH*Z17MtCBzBSyOaQJAamfU0SChvfiq4KOJjOOiCve*QfE2OaG7Co49bf6LxC3sNVlFAfBnzmw*g!!/m&bo=wAPAA8ADwAMRADc!&rf=mood_app",
							success(result) {
								// 插入图片
								ctx.drawImage(result.path, uni.upx2px(144), uni.upx2px(705), uni.upx2px(470), uni.upx2px(470))
								// 文字大小
								let fontSizea = 18;
								ctx.font = `${fontSizea}px Arial`;//绘制文字
								// 文字颜色
								ctx.fillStyle = '#FFFFFF'
								// 插入文字
								ctx.fillText(`邀请码： ${yao}`,uni.upx2px(250), uni.upx2px(613));
								// 保存
								// ctx.save()
								// 绘画
								ctx.draw(true,()=>{
									uni.canvasToTempFilePath({
										canvasId: 'firstCanvas',
										success: (res) => {
											// 在H5平台下，tempFilePath 为 base64
											this.posterUrL = res.tempFilePath;
											// 不知道是啥 有兴趣 搜了 评论下来  感谢你们
											uni.hideLoading();
											//  储存海报地址  也是分享的地址
											uni.setStorageSync('person-card',this.posterUrL);
										}
									})
								})
							},
							// 函数运行错误
							fail: (err) => {
								console.log(err)
							}
						})
					},
					// 函数运行错误
					fail: (err) => {
						console.log(err,'这是一个海报错误')
					}
				})
			},

要注意的是在画完海报的时候要隐藏起来 具体方法 使用 v-show 或者是v-if
都是可以 但是要注意 一定是要在 保存完路径后 消失 还有画海报之前有 就可以
然后就是分享了，直接使用官方给出的分享就可以了

					// 分享朋友全
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 2,
						// 获取刚刚储存的地址
						imageUrl:uni.getStorageSync('person-card'),
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});

				// 分享微信好友
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					// 刚刚的存储地址
					imageUrl: uni.getStorageSync('person-card'),
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});

有啥不同见解，热烈欢迎