uniapp 小程序 生成 海报

1.下载  海报里面所需图片 ，一般来说是网络地址

uni.downloadFile({
			    		url:e,
					success:function(e){
						
					}
				})

2.绘制canvas 海报，
<canvas class="canOne" canvas-id="firstCanvas"   ></canvas>

let that = this
				let ctx = uni.createCanvasContext('firstCanvas')
				
				let canvaWidth = uni.upx2px(620)
				let canvaHight = uni.upx2px(1060)

				let firstBgWidth = uni.upx2px(560)
				let firstBgheight = uni.upx2px(900)
				let firstBgX = uni.upx2px(30)
				let firstBgeY = uni.upx2px(80)

				let firstImageWidth = uni.upx2px(520)
				let firstImageHeight = uni.upx2px(340)
				let firstImageX = uni.upx2px(50)
				let firstImageY = uni.upx2px(100)

				let fontTitle = uni.upx2px(36)
				let fontTeacher = uni.upx2px(24)
				let fontName = uni.upx2px(26)
				let fontNames = uni.upx2px(18)

				var avatarurl_width = 50;
				var avatarurl_heigth = 50;
				var avatarurl_x = 30;
				var avatarurl_y = uni.upx2px(750)

				ctx.drawImage(this.data.bg_1, 0, 0, canvaWidth, canvaHight)
				ctx.drawImage(this.data.bg_11, firstBgX, firstBgeY, firstBgWidth, firstBgheight)
				ctx.drawImage(this.data.firstImage, firstImageX, firstImageY, firstImageWidth, firstImageHeight)

				var name1height = uni.upx2px(500)
				var name1width = uni.upx2px(500)
				ctx.setFillStyle('#262626')
				ctx.setFontSize(fontTitle)
				ctx.textAlign = "left"
				ctx.fillText(this.data.title, 30, name1height, name1width)

				var name2height = uni.upx2px(540)
				ctx.setFillStyle('#9A9A9A')
				ctx.setFontSize(fontTeacher)
				ctx.textAlign = "left"
				ctx.fillText('授课讲师：' + this.data.teacher, 30, name2height, name1width)

				ctx.save();
				ctx.beginPath();
				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2,false);
				ctx.clip();
				ctx.drawImage(this.data.headImage, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
				ctx.restore();

				
				ctx.setFillStyle('#262626')
				ctx.setFontSize(fontName)
				ctx.textAlign = "left"
				ctx.fillText(this.data.name, 90, uni.upx2px(790), 250)

				ctx.setFillStyle('#9A9A9A')
				ctx.setFontSize(fontNames)
				ctx.textAlign = "left"
				ctx.fillText(this.data.produce_top, 90, uni.upx2px(820), 80)
				
				ctx.setFillStyle('#9A9A9A')
				ctx.setFontSize(fontNames)
				ctx.textAlign = "left"
				ctx.fillText(this.data.produce_bottom, 90, uni.upx2px(840), 80)
				
				ctx.drawImage(this.data.QrImage, uni.upx2px(380), uni.upx2px(730), uni.upx2px(180), uni.upx2px(180))

				ctx.draw()

3.保存海报

uni.canvasToTempFilePath({
                    canvasId: canvasId,
                    success: (res) => {
                        that.imageUrl = res.tempFilePath
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: (res) => {
                                uni.showToast({
                                    title: '保存成功'
                                })
                            },
                            fail() {
                                uni.showToast({
                                    icon: 'none',
                                    title: '保存名片码失败'
                                })
                            }
                        })
                        }

}）