【微信小程序】微信小程序保存二维码海报到相册，以及解决二维码不够清晰的问题

83 阅读 0 评论 55 点赞

我是靠谱客的博主娇气冬日，这篇文章主要介绍【微信小程序】微信小程序保存二维码海报到相册，以及解决二维码不够清晰的问题，现在分享给大家，希望可以做个参考。

小程序保存二维码海报

这里写图片描述

添加 canvas 元素poster

复制代码

1
2
  <canvas class="poster" canvas-id="poster" style="width:300rpx;height:300rpx;"></canvas>

给poster添加海报、二维码

复制代码

1
2
3
4
5
6
7
8
initCanvas(){
	var ctx = wx.createCanvasContext('poster')
	ctx.drawImage('https://image.watsons.com.cn//upload/0851366c.png', 0, 0, 241, 368)   //画海报
	ctx.drawImage(qrCodeUrl, 70, 240, 120,120) //画二维码
	ctx.draw()
	this.save()  //生成微信临时模板文件path
}

生成微信临时模板文件path

复制代码

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
save(){  
	var self = this;
	setTimeout(()=>{
		wx.canvasToTempFilePath({
		  x: 0,
		  y: 0,
		  width: 241,
		  height: 368,
		  destWidth: 241,
		  destHeight: 368,
		  canvasId: 'poster',
		  success: function(res) {
		    console.log('save',res.tempFilePath)
		    self.saveUrl = res.tempFilePath  //保存临时模板文件路径
		  },
		  fail:function(res){
		  	// wx.showToast({
		  	// 	title:'网络繁忙',
		  	// 	icon:'none'
		  	// })
		  	return
		  }
		})
	},500)
}

保存到手机相册 wx.downloadFile 可以不要，因为此时saveUrl已经是wx.downloadFile，如果是第三方路径则需要先downloadFile

复制代码

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
saveImageToPhotosAlbum(){
				console.log(this.saveUrl)
				wx.showLoading({
					title:'下载中...'
				})
				var self = this;
				wx.downloadFile({
				  url: self.saveUrl,
				  success: function(res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
				       wx.saveImageToPhotosAlbum({
				       		filePath:res.tempFilePath,
						    success(result) {
						    	wx.hideLoading()
						    	wx.showToast({
						    		title:'已保存至相册',
						    		icon:'none',
						  
						    	})
						    	
						    },
						    fail(result){
						    	wx.hideLoading()
						    	wx.showToast({
						    		title:'下载失败',
						    		icon:'none',

						    	})
						    	
						    }
						})
				    }
				  },
				  fail(result){
				  		wx.hideLoading()
				  		wx.showToast({
				  			title:'下载失败',
				  			icon:'none',

				  		})
				    	
				    }
				})
			},

解决海报中的二维码不够清晰的问题

添加 id 为generate的canvas，poster用作展示，generate用作保存

复制代码

1
2
3
	<canvas class="poster" canvas-id="poster" style="width:300rpx;height:300rpx;"></canvas>
    <canvas class="generate" canvas-id="generate" style="width:1500rpx;height:2296rpx;"></canvas>

在generate 上 initCanvas

复制代码

1
2
3
4
5
6
var ctx = wx.createCanvasContext('generate')
ctx.drawImage('https://image.watsons.com.cn//upload/0851366c.png', 0, 0, 750, 1148)  //画海报
ctx.drawImage(QrCodeUrl, 300, 886, 150,150)  //画二维码
ctx.draw()
this.save()

生成微信临时模板文件path ,同时生成展示用的海报

复制代码

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
save(){   //保存二维码
	var self = this;
	setTimeout(()=>{
		wx.canvasToTempFilePath({
		  x: 0,
		  y: 0,
		  width: 750,
		  height: 1148,
		  destWidth: 750,
		  destHeight: 1148,
		  canvasId: 'generate',
		  success: function(res) {
		  	this.tempFilePath = res.tempFilePath
		    console.log('save',res.tempFilePath)
		    var ctx = wx.createCanvasContext('poster')    //加载展示用的海报
		    ctx.drawImage(res.tempFilePath, 0, 0, 241, 368)
		    ctx.draw()
		    self.saveUrl = res.tempFilePath    //保存临时模板文件路径
		  },
		  fail:function(res){
		  	return
		  }
		})
	},500)
}