【uni-app】App实现二维码分享图合成(支持单张或多张)

【uni-app】App实现二维码分享图合成

写在前面, 该文章目前仅支持合成特定数量的分享图, 不支持随意数量分享图合成

一. 背景

app内实现一个邀请拉新功能, 需要根据每个用户生成各自的二维码, 并且把二维码合成到海报, 生成3张海报, 用户三选一进行分享. 今天我们只说其中一个功能实现 ---- 合成多张二维码分享图

二. 功能实现

*** 生成单张二维码分享图

单张可以参考这位博主内容 : https://dandelioncloud.cn/article/details/1419298504186597377/

*** 生成单张二维码分享图

在上面单张的基础上, 我做了改动, 实现特定数量分享图的生成

前提 : 安装插件 – https://ext.dcloud.net.cn/plugin?id=2434

模板

<button type="default" @click="beginCanvasBatch">开始批量合成</button>

<button style="margin-top: 50rpx;" @click="save(0)">保存图片1</button>
<button style="margin-top: 50rpx;" @click="save(1)">保存图片2</button>
<button style="margin-top: 50rpx;" @click="save(2)">保存图片3</button>

// 生成后的图片列表
<view v-for="(itemImg, index) in finallyImgList" :key="index + 'img'"><image :src="itemImg" mode="widthFix"></image></view>

// 具体作用不清楚, 组件实际不在界面展示出来, 估计只是为了生成图片的一个占位
// 这里用不了v-for循环,所以只能固定合成的数量, 也可能是我方式错误, 如果可以告知, 这样写着实不太优雅
<mosowe-canvas-image ref="mosoweCanvasComponents0" @canvasImage="_canvasImage0" :lists="imageList[0]" height="426" width="296" />

<mosowe-canvas-image ref="mosoweCanvasComponents1" @canvasImage="_canvasImage1" :lists="imageList[1]" height="426" width="296" />

<mosowe-canvas-image ref="mosoweCanvasComponents2" @canvasImage="_canvasImage2" :lists="imageList[2]" height="426" width="296" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

script

<script>
import mosoweCanvasImage from '@/components/mosowe-canvas-image/mosowe-canvas-image';
export default {
	comments: {
		mosoweCanvasImage
	},
	data() {
		return {
			finallyImgList: [], // 合成后的图片list
			imageList: [], // 整合的未合成的图片list
			logoImage: {
				type: 'image',
				content: 'http://xxx.jpg',
				width: 15,
				height: 15,
				x: 42,
				y: 352,
				arc: false,
				arcX: 0,
				arcY: 0,
				arcR: 0
			}, // logo
		};
	},
	computed: {
		qrImage() {
			var userInfo = getApp().globalData.global_user;			
			var id = userInfo.id 
			return {
				type: 'qr',
				content: `https://xxx?id=${id}`,
				text: '这是一个二维码',
				width: 60,
				height: 60,
				x: 20,
				y: 330,
				arc: false,
				arcX: 0,
				arcY: 0,
				arcR: 0
			}; // 二维码
		}
	},
	methods: {
		// 开始生成
		beginCanvasBatch() {
			let this_ = this;

			var area;
			this.imageList.map((item, i) => {
				setTimeout(function() {
					area = 'mosoweCanvasComponents' + i;
					this_.$refs[area].createCanvas();
				}, 2000 * i);
			});
		},
		_canvasImage0(e) {
			this.finallyImgList = [];
			console.log('图片0', e);
			this.finallyImgList.push(e);
		},
		_canvasImage1(e) {
			console.log('图片1', e);
			this.finallyImgList.push(e);
		},
		_canvasImage2(e) {
			console.log('图片2', e);
			this.finallyImgList.push(e);
		},
		formatImageList() {
			this.imageList = [
				[
					{
						type: 'image',
						content: 'https://xxx.jpg',
						width: 296,
						height: 426,
						x: 0,
						y: 0
					},
					this.qrImage,
					this.logoImage
				],
				[
					{
						type: 'image',
						content:'http://xxx.jpg',
						width: 296,
						height: 426,
						x: 0,
						y: 0
					},
					this.qrImage,
					this.logoImage
				],
				[
					{
						type: 'image',
						content:'http://xxx.jpg',
						width: 296,
						height: 426,
						x: 0,
						y: 0
					},
					this.qrImage,
					this.logoImage
				]
			];
		},
		save(i) {
			let url = this.finallyImgList[i];
			uni.saveImageToPhotosAlbum({
				filePath: url,
				success: () => {
					uni.hideLoading();
					uni.showToast({
						title: '图片已保存'
					});
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '图片保存失败'
					});
				}
			});
		},
	},
	onLoad() {
		this.formatImageList();
	}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

三. 效果

底图+二维码+logo