需求：

想做一个微信好友分享二维码功能，朋友扫码即可下载软件

效果图：

有一张背景图，一张二维码图，需要合成一张图分享，但不知如何合成？

操作：

主要采用canvas组件
直接上代码：
注意：我是已有现成的二维码图片，所以直接放来用，如果没有，可以下载tki-qrcode这个插件。

<template>
	<!-- 分享邀请码图片（包含二维码） -->
	<view id="uni-share">
		<view class="post">
			<view class="wrapper" >
			   <canvas style="width: 100%;height:100%;" canvas-id="firstCanvas"></canvas>
		    </view>
		</view>
		<view class="uni-click-share" @click="save" :style="{top:-width*1200/750+'rpx',left:width*0.55+'rpx'}">
			<view class="uni-click-button">
				<image src="../../../static/sharemenu/weixin.png" 
				style="width: 40rpx;
			    height: 40rpx;
				margin-left: 8rpx"></image>
				<view class="uni-click-content">
					邀请好友
				</view>
			</view>
		</view>
	</view>
</template>

在onReady()中开始绘制画布

onReady: function(e) {
			var _this = this;
			let inviteCode='';
			ApiPostInviteCode({
				method: 'post'
			}).then(res =>{
				inviteCode = res.data.code
				console.log(inviteCode)
				//获取手机设备的信息
				let system_info = uni.getSystemInfoSync();
			    var context = uni.createCanvasContext('firstCanvas')
			    context.drawImage( '../../../static/inviteQRbg.png',0,0,system_info.screenWidth,system_info.screenWidth*1000/750)
                context.drawImage(_this.qr_path,system_info.screenWidth*0.35,system_info.screenWidth*850/750, 120, 120);
			    context.draw()
			})			
		},

在methods中写分享事件

methods: {
			save() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否保存图片并分享？',
					success: function(res) {
						console.log(res)
						if (res.confirm) {
							uni.showLoading({
								title: '保存中...'
							})
							uni.canvasToTempFilePath({
								fileType:'jpg',
								canvasId: 'firstCanvas',
								success: function(res) {
									console.log(res)
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.hideLoading()
											uni.showToast({
												title: '已经保存到相册，可以分享了',
												icon: 'none'
											})
											that.beginshare();
										}
									});
								},
								fail: function(error) {
									console.log(error)
									uni.hideLoading()
								}
							})
						} else if (res.cancel) {
						}
					}
				});
			},
			//调起用户手机的服务商列表
			beginshare() {
				var that = this;
				uni.getProvider({
					service: 'share',
					success: function(res) {
						var provider = res.provider.splice(',')
						var newarr = [];
						for (var i in provider) {

							// if (provider[i] == 'qq') {
							// 	newarr[2] = '分享到QQ'
							// }
							if (provider[i] == 'weixin') {
								newarr[0] = '分享到微信'
								newarr[1] = '分享到朋友圈'
							}
						}
						that.provider = newarr
						console.log(that.provider);
						that.share();

					}
				});
			},

			//对服务商列表进行排序分配相应的参数
			share() {
				var that = this
				uni.showActionSheet({
					itemList: that.provider,
					success: function(rest) {
						if (rest.tapIndex == 0) {
							that.sendimg("weixin", "WXSceneSession");
						} else if (rest.tapIndex == 1) {

							that.sendimg("weixin", "WXSenceTimeline");
						}
						// else if (rest.tapIndex == 2) {
						// 	that.sendimg("qq", "");
						// }

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//用户从相册中选择图片进行分享
			sendimg(strProvider, strScene) {
				// 选取图片			
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {

						uni.share({
							provider: strProvider,
							scene: strScene,
							type: 2,
							imageUrl: res.tempFilePaths[0],
							success: function(res) {
								uni.showToast({
									title: JSON.stringify(err),
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {

								console.log("fail:" + JSON.stringify(err));
							}
						});


					},
				}) // 选取图片		
			},
		}

css样式

#uni-share {
		.post {
		    height: 100%;
			.wrapper {
			width:100%;
			height: 1300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
		      }
			}
		
		.uni-click-share {
			background-color: #fdb119;
			border-radius: 50rpx;
			width: 50%;
			display: flex;
			align-items: center;
			overflow-x: hidden;
			position: relative;
			z-index: 100;
			.uni-click-button {
				margin-left: 20rpx;
				padding: 8rpx;
				display: flex;
				align-items: center;
			}

			.uni-click-content {
				font-size: 11px;
				padding-left: 60rpx;
				padding-right: 15rpx;
			}
		}
	}

到此处，基本就把功能实现了。

踩坑之处

1、背景图在不同手机上的自适应
我也搜了很多图片如何自适应不同屏幕的问题，但解决方案不是很令人满意，于是就想着，能不能根据 .png图片的宽高比来计算，因为 背景图宽度 = 手机的宽度 ，所以根据宽高比计算出图的高度，CSS样式代码已给出，可参考。
2、图片比例正确了，但是分享后，图片底下是黑色的
如下图：最终还是看API，默认生成的图片格式为png,自己手动改成jpg就可。