uniapp生成海报

uniapp生成海报

我们最后想要的效果：

1.分析结构：
因为只有二维码是后台获取的所以我们只有一个大背景图和一个二维码
2.所用技术：
uni.createCanvasContext----创建canvas对象并且将图片等元素插入到canvas中
uni.canvasToTempFilePath----将canvas对象转换成图片
uni.saveImageToPhotosAlbum----保存图片
3.操作
首先在页面中插入一个canvas标签并且设置 canvas-id、样式

<canvas canvas-id="canvas" style="width:648rpx;height: 936rpx;margin: 30rpx auto;"></canvas>

当我们页面解析完成之后执行

			async creatCanvas(url) {
				let that = this
				//创建canvas对象
				this.canvas = uni.createCanvasContext('canvas', this);
				//这里是我自己的方法下载图片
				//canvas中的插入的图片不能是网络地址只能是下载到本地的 
				let imgUrl = await this.urlTofile(url);
				//插入背景图 第2 3 4 5参数单位是px的所以我们要做适配 rpx转换为px 可以自定义方法 也可以使用uniapp中的方法
				this.canvas.drawImage(require('./static/canvas.png'), 0, 0, this.rpxTopx(648), this.rpxTopx(936));
				//将二维码插入到canvas中
				this.canvas.drawImage(imgUrl, this.rpxTopx(174), this.rpxTopx(450), this.rpxTopx(300), this
					.rpxTopx(300));
				//成功之后
				this.canvas.draw(true, res => {
					setTimeout(() => {
					//讲canvas转换成图片
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							canvasId: 'canvas',
							fileType: 'png',
							quality: 1,
							success: success => {
								this.imgUrl = success.tempFilePath
								// that.canvas.draw()
							}
						})
					}, 500)

				});
			},

这里海报图就出来了也已经存到 imgUrl字段里了
然后就是保存图片

			savePhoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgUrl,
					success: () => {
						// uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					},
					fail: () => {
						uni.hideLoading();

					},
					complete: () => {

					}
				});
			},

最后提供一下 rpx转px 和下载图片的方法

			//rpx转px
			rpxTopx(rpx) {
				return (rpx / 750) * wx.getSystemInfoSync().windowWidth
			},
			//下载图片
			urlTofile(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success(res) {
							resolve(res.path)
						},
						fail(res) {
							console.log("fail -> res", res)
							uni.showToast({
								title: "图片下载异常",
								duration: 2000,
								icon: "none"
							})
						}
					})

				})
			},