一、邀新二维码和海报拼接

1.引入插件到components文件下

插件地址 ：https://download.csdn.net/download/weixin_51126967/88068203

2.在需要写弹框海报的页面写入如下代码

template

  <uni-popup ref="invitePoster" type="center" maskBackgroundColor="rgba(0,0,0,.7)" :isMaskClick="true">
     <view class="content" @click="closePoster">
	   <view class="post">
			<p style="color: #ffffff;font-size: 30rpx;margin-top: 100rpx;">
				长按保存图片至相册
			</p>
			<view class="content" style="text-align: center;margin: -20rpx auto 80rpx;transform: scale(0.9);">
				<view style="margin: 0 auto;width: 100%;">
					<img id="test" style="width: 686rpx;height: 1214rpx;" />
				</view>
			</view>
		</view>
		<view class="tupian" @click="erweima" style="text-align: center;"></view>
	</view>
  </uni-popup>
  <view class="bottom-btn-box">
	 <view class="bottom-btn" @click="getPoster">立即邀请</view>
  </view>

script

import canvas_x from '@/components/mg-h5hb/common/canvas_x.js'
export default {
    data() {
			return {
				poster: {},
				canvasId: 'default_PosterCanvasId',
				nickname: "",
				code: '',
				userInfo: null,
			};
		},
    methods: {
			//获取邀请二维码
			async getInviteCode() {
			//我封装的请求方法，改成你们自己封装的请求
				let data = await this.$api.request(二维码接口, 'GET', {}, 'token', false)
				this.code = JSON.parse(data).data
			},
			erweima() {
				var that = this
				this.tishi = 1;
				canvas_x.makeImage({
					type: 'url',
					parts: [{
							type: 'image',
							//海报图片
							url: '../../../static/invitePoster.png',
							width: 680,
							height: 1264,
							backgroundSize: 680,
						},
						{
							type: 'qrcode',
							text: this.$callbackUlr + '/pages/index3/homePage?loginType=Mobile&inviteCode=' +
								this
								.code,
							x: -44,
							y: -44,
							width: 100,
							height: 100,
							padding: 0,
							background: '#fff',
							level: 3
						},
						 {
							type: 'text',
							text: '邀请人:',
							textAlign: 'left',
							lineAlign: 'TOP',
							x: 440,
							y: 1115,
							color: 'black',
							size: '30px',
						    bold: true
						},
						{
							type: 'text',
						 	text: '邀请码:' + this.code,
						 	textAlign: 'left',
						 	lineAlign: 'TOP',
						 	x: 440,
							y: 1185,
						 	color: 'black',
						 	size: '30px',
						    bold: true
						 }
					],
					width: 680,
					height: 1264
				}, (err, data) => {
					document.getElementById('test').src = data
				})
			},
		async getPoster() {
				await this.getInviteCode()
				await this.erweima()
				this.$refs.invitePoster.open('center')
		},
}

style

// An highlighted block
<style lang="scss">
.post {
	width: 100%;
	position: relative;
	top: 0rpx;
	z-index: 10;
	text-align: center;
}
</style>

二、最终效果