uniapp 小程序，用uqrcode 生成海报_uniapp qrcode.tocanvas

<template>
	<view>
		<uqrcode ref="qrcode" canvas-id="qrcode" :value="uqrcodeUrl" :options="{ margin: 10}" :size="144" :start="false"
			class="canvas" @complete="completeH5"></uqrcode>
		<canvas :class="canvas" canvas-id="myCanvasIdH5"></canvas>
		<u-popup v-model="haibaoShow" mode="center" class="poup">
			<view style="width: 550rpx;margin: 20px;">
				<img :src="haibaoImg" class="w100" mode="widthFix">
				<button class="btn_blue_jianbian" @click="savehaibao(haibaoImg)"
					style="margin-top:10px;margin-bottom;width:100%;">保存海报到相册</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				bgImg: "", //背景图，这里的地址域名，要写到允许的域名表里
				bgImgResult: "", //背景图读取后的本地文件
				ready: false, //背景图请求到本地是否完成
				haibaoShow: false, //海报popup
				qrcodeImg: "", //生成的二维码图片
				haibaoImg: "", //生成的海报img
				content: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈", //要写的字，做了 emoji 过滤 和换行，含有emoji的字，iphone 不支持
			};
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.getImg(this.bgImg)
				that.$refs.qrcode.make({
					success: () => {},
					fail: err => {}
				});
			},
			//二维码生成成功，调用海报生成
			completeH5() {
				let that = this;
				that.$refs.qrcode.toTempFilePath({
					success: res => {
						base64ToPath(res.tempFilePath).then((result) => {
							this.qrcodeImg = result
							this.shengcheng()
						});
					}
				})
			},
			//得到海报底图，
			getImg(bgImg) {
				let that = this;
				wx.getImageInfo({
					src: bgImg, //请求的网络图片路径
					success: function(res) {
						//请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
						that.bgImgResult = res.path
						that.ready = true
					}
				})
			},
			shengcheng() {
				// 先判断底图是否获取到,没获取到的话,再等等
				let that = this
				if (this.ready) {
					wx.showLoading({
						icon: 'loading',
						mask: true,
						duration: 200000,
						title: '海报绘制中...'
					})
					that.haibaoShow = true
					setTimeout(() => {
						that.canvas()
					}, 5000)
				} else {
					setTimeout(() => {
						that.shengcheng()
					}, 1000)
				}
			},
			canvas() {
				console.log("海报生成中", this.qrcodeImg, this.erweimaText)
				let that = this;
				that.showImg = true
				uni.hideLoading()
				uni.showLoading({
					title: '海报生成中~'
				});
				let ctx = uni.createCanvasContext("myCanvasIdH5", this);
				// 设置画布尺寸
				// 画底图
				// 画布填充背景色，默认白色
				ctx.setFillStyle("#fff");
				// 设置画布尺寸
				ctx.fillRect(0, 0, 750, 1448);
				// 画布填充背景色，默认白色
				ctx.setFillStyle("#fff");
				// 设置画布尺寸
				ctx.fillRect(0, 0, 750, 1448);
				// 绘制 背景图
				ctx.drawImage(this.bgImgResult, 0, 0, 750, 1448);
				// 绘制 二维码
				ctx.drawImage(this.qrcodeImg, 550, 1200, 144, 144);
				// console.log("13画二维码")
				// 画笔颜色
				ctx.setFillStyle("#000000");
				// 字体大小
				ctx.setFontSize(16);
				ctx.setTextAlign("left");
				//绘制二维码上方文字
				const htmlString = this.content;
				const regex = /(<([^>]+)>)/gi;
				const emojiRegex =
					/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]|[\uD800-\uDBFF]|[\uDC00-\uDFFF]|[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
				const plainText = htmlString.replace(emojiRegex, '').replace(regex, '').replace(/\n/g, '');
				// console.log("plainText", plainText)
				ctx.fillText(plainText.substring(0, 30), 70, 1220);
				ctx.fillText(plainText.substring(31, 60), 70, 1250);
			}
			ctx.draw(true, (() => {
				let a = setTimeout(async () => {
					await uni.canvasToTempFilePath({
						canvasId: 'myCanvasIdH5',
						success: function(res) {
							that.haibaoImg = res.tempFilePath
							uni.hideLoading();
							clearTimeout(a);
						},
						fail: function(res) {
							console.log(res);
						}
					}, that);
				}, 250);
			})());
		},
		savehaibao(tempFilePath) {
			let that = this;
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: tempFilePath,
				success(res) {
					setTimeout(() => {
						uni.showModal({
							title: '保存成功',
							content: '你可以从手机相册把二维码分享到朋友圈',
							cancelText: "", // 取消按钮的文字  
							confirmText: "我知道了", // 确认按钮的文字  
							showCancel: false, // 是否显示取消按钮，默认为 true
							confirmColor: '#f55850',
							cancelColor: '#39B54A',
							success: (res) => {
								if (res.confirm) {
									that.haibaoShow = false
									// console.log(
									// 'comfirm') //点击确定之后执行的代码
								} else {
									// console.log(
									// 	'cancel') //点击取消之后执行的代码
								}
							}
						})
					}, 10)
				},
				// 一般情况，选择了拒绝就会进入fail中
				fail(err) {
					uni.showModal({
						title: '提示',
						content: '需要您授权保存相册',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success(settingdata) {
										if (settingdata.authSetting['scope.writePhotosAlbum']) {
											uni.showModal({
												title: '提示',
												content: '获取权限成功,再次保存图片即可成功',
												showCancel: false,
											})
										} else {
											uni.showModal({
												title: '提示',
												content: '获取权限失败，无法保存到相册',
												showCancel: false
											})
										}
									}
								})
							}
						}
					})
				},
				complete: () => {
					that.showImg = false
				}
			})
			// #endif
			// #ifdef H5
			/* 可以在电脑浏览器下载，移动端iOS不行，安卓微信浏览器不行，安卓外部浏览器可以 */
			const aEle = document.createElement('a');
			aEle.download = '二维码'; // 设置下载的文件名，默认是'二维码'
			aEle.href = tempFilePath;
			document.body.appendChild(aEle);
			aEle.click();
			aEle.remove(); // 下载之后把创建的元素删除
			that.showImg = false
			uni.hideLoading();
			// #endif
		},
	}
	}
</script>
<style scoped lang="scss">
	.poup {
		background-color: transparent;
		border-radius: 40rpx;
	}

	.canvas {
		width: 200px;
		height: 240px;
		position: absolute;
		left: -1000%;
		// background-color: red;
	}
</style>
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

base64ToPath的代码

function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}

function dataUrlToBase64(str) {
    var array = str.split(',')
    return array[array.length - 1]
}

var index = 0
function getNewFileId() {
    return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
    var v1Array = v1.split('.')
    var v2Array = v2.split('.')
    var update = false
    for (var index = 0; index < v2Array.length; index++) {
        var diff = v1Array[index] - v2Array[index]
        if (diff !== 0) {
            update = diff > 0
            break
        }
    }
    return update
}

export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = getNewFileId() + '.' + extName
        if (typeof plus === 'object') {
            var basePath = '_doc'
            var dirPath = 'uniapp_temp'
            var filePath = basePath + '/' + dirPath + '/' + fileName
            if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
                plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
                    entry.getDirectory(dirPath, {
                        create: true,
                        exclusive: false,
                    }, function(entry) {
                        entry.getFile(fileName, {
                            create: true,
                            exclusive: false,
                        }, function(entry) {
                            entry.createWriter(function(writer) {
                                writer.onwrite = function() {
                                    resolve(filePath)
                                }
                                writer.onerror = reject
                                writer.seek(0)
                                writer.writeAsBinary(dataUrlToBase64(base64))
                            }, reject)
                        }, reject)
                    }, reject)
                }, reject)
                return
            }
            var bitmap = new plus.nativeObj.Bitmap(fileName)
            bitmap.loadBase64Data(base64, function() {
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: dataUrlToBase64(base64),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196