uni-app小程序使用小程序码绑定用户信息合成海报

uni-app小程序使用小程序码绑定用户信息合成海报

需求

uni-app小程序使用小程序码绑定用户信息合成海报，小程序码绑定用户信息，和背景图片生成一张海报并保存到本地。

目标

生成目标图片 并保存

准备工作

1.小程序码(后台请求微信接口生成图片Buffer)，我这里叫后台处理生成了base64格式。 微信小程序获取小程序码官方文档

2.背景图片（放在本地项目目录中）

代码实现

1.运用canvas,创建画布，小程序码和背景图片绘制的方法。

<canvas class="page-content" canvas-id="shareCanvas" style="width:100%;height:100%"></canvas>
// 绘制画布 
// 参数说明
// bgImg：绘制的背景图片，此项目使用的是本地图片地址
// qrImg：绘制的小程序码图片，此项目使用的是将后台的base64转为本地的临时地址
// qrWidthRatio：根据自己的需求调整，参数用来调整二维码在背景图片的位置
// qrHeightRatio：根据自己的需求调整，参数用来调整二维码在背景图片的位置
drawAndShareImage(bgImg, qrImg, qrWidthRatio, qrHeightRatio) {
	let _this = this;
	return new Promise((resolve) => {
		uni.getSystemInfo({
			success: function(e) {
				let width = e.windowWidth;
				let height = e.screenHeight;
				const ctx = uni.createCanvasContext("shareCanvas");
				// 背景底图 
				// drawImage(第一个参数接收一个图片路径,x轴开始画,y轴开始画,所画的宽,所画的高度)
				ctx.drawImage(bgImg, 0, 0, width * 0.7, width * 1.01);  // 可根据自己的项目进行设置
				// 小程序码
				const qrImgSize = width * 0.68 * 0.3; 
				ctx.drawImage(qrImg, width * qrWidthRatio, width * qrHeightRatio, qrImgSize, qrImgSize);
				ctx.stroke();
				// 将2张图片绘制到canvas中，绘制完成的canvas合成一张临时图片才可以保存。
				ctx.draw(false, () => {
					wx.canvasToTempFilePath({
						//获取生成的临时图片
						canvasId: "shareCanvas",
						success: function(res) {
							resolve("success");
							wx.getFileSystemManager().readFile({
								// 文件管理系统按照base64方式读取生成的图片
								filePath: res.tempFilePath, //选择图片返回的相对路径
								encoding: "base64", //编码格式
								success: (res) => {
									//成功的回调
									_this.qrcode = "data:image/png;base64," + res.data;
								},
							});
						},
						fail: function(err) {
							console.log(err);
						},
					});
				});
			},
		});
	});
},

2.获取小程序二维码，请求后台接口，返回base64小程序二维码

// 获取小程序二维码
// 这里data格式参考小程序官方文档 (page 为页面路径，scene 为页面参数)
// 注意事项：如果直接传scene：`inviterId=*****`,前端通过onLoad(option)中，option.scene拿不到inviterId，所以这里特殊处理了一下inviterId_${this.$cache.get("customerId")}，使用下划线_的方式分割了参数
let data = {
	page: "pages/share/two",
	scene: `inviterId_${this.$cache.get("customerId")}`,
};
getQrcode(data) {
	return new Promise((resolve) => {
		this.$http.get("/wxaCode", data).then((res) => {
			resolve(res);
		});
	});
},

3.base64图片转成临时图片，因为从后台获取到的小程序码为base64格式，不可以直接在canvas上直接画出来，所以此处将base64转为本地的临时图片。

// base64图片转网络图片 返回base64图片的临时地址
base2Path(base64) {
	return new Promise((resolve) => {
		const fs = wx.getFileSystemManager();
		var times = new Date().getTime();
		var tempPath = wx.env.USER_DATA_PATH + "/" + times + ".png";
		//将base64图片写入
		fs.writeFile({
			filePath: tempPath,
			data: base64,
			encoding: "base64",
			success: () => {
				//写入成功了的话，新的图片路径就能用了
				resolve(tempPath);
			},
		});
	});
},

4.将生成的海报保存下来。
说明：生成的海报为base64格式，saveImageToPhotosAlbum此方法用来保存base64格式的图片(也是将base64转为本地临时图片)。

// 保存按钮
<view class="share-item" @click="saveImage">
	<img src="../../static/share-save.png" alt="" />
	<view>保存</view>
</view>

// 保存图片点击事件
saveImage() {
	uni.getSetting({
		//获取用户的当前设置
		success: (res) => {
			if (res.authSetting["scope.writePhotosAlbum"]) {
				//验证用户是否授权可以访问相册
				this.saveImageToPhotosAlbum();
			} else {
				uni.authorize({
					//如果没有授权，向用户发起请求
					scope: "scope.writePhotosAlbum",
					success: () => {
						this.saveImageToPhotosAlbum();
					},
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '请打开保存相册权限，再点击保存相册分享',
							success: function (res) {
								if (res.confirm) {
									uni.openSetting({
										//调起客户端小程序设置界面,让用户开启访问相册
										success: (res2) => {
											console.log('res2.authSetting',res2.authSetting)
										},
									});
								} else if (res.cancel) {
								}
							}
						});
					},
				});
			}
		},
	});
},
// 保存base64格式的图片
saveImageToPhotosAlbum() {
	let _this = this;
	let base64 = this.qrcode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
	let filePath = wx.env.USER_DATA_PATH + "/hym_pay_qrcode.png";
	uni.getFileSystemManager().writeFile({
		filePath: filePath, //创建一个临时文件名
		data: base64, //写入的文本或二进制数据
		encoding: "base64", //写入当前文件的字符编码
		success: (res) => {
			uni.saveImageToPhotosAlbum({
				filePath: filePath,
				success: function(res2) {
					_this.posterShow = false;
					uni.showToast({
						title: "保存成功，请从相册选择再分享",
						icon: "none",
						duration: 5000,
					});
				},
				fail: function(err) {},
			});
		},
		fail: (err) => {},
	});
},

总结

• drawAndShareImage方法将两张图片绘制在一起时，通过ctx.draw(false, () => {…}）中使用wx.canvasToTempFilePath将canvas合成的图片转为临时图片路径，然后wx.getFileSystemManager().readFile() 转为base64。
• ctx.drawImage() 方法第一个参数使用的是本地图片路径或者临时图片路径，网络地址好像不行。