uniapp开发小程序canvas转下载

160 阅读1分钟

把两张图片利用canvas合并。然后下载,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字,直接看代码吧,凑字数到100字直接看代码吧,凑字数到100字直接看代码吧,凑字数到100字

downWifiImg(){
				var that=this
				uni.downloadFile({
					url:that.qrcode,//网络图片的地址
					success:function(res){
						const img2=res.tempFilePath;
						const systemInfo = uni.getSystemInfoSync()
						// 获取视口宽度
						const viewportWidth = systemInfo.windowWidth
						// 获取视口高度
						const viewportHeight = 700
						const ctx = uni.createCanvasContext('myCanvas')
						console.log(viewportWidth,viewportHeight);
						ctx.drawImage('/static/share/bg.jpg', 0, 0, viewportWidth, viewportHeight)
						
						ctx.drawImage(img2,(viewportWidth-250)/2, (viewportHeight-250)/2,250, 250)
						ctx.draw(false, () => {
						 uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							success: (res) => {
								console.log(res.tempFilePath);
							  that.mergedImage = res.tempFilePath;
							  uni.saveImageToPhotosAlbum({
							  	filePath: res.tempFilePath,
							  	success: function () {
									uni.showToast({
										title:'保存成功'
									})
							  		console.log('save success');
							  	},
								fail(err){console.log('执行完了',err);},
								complete(){
									console.log('执行完了');
								}
							  });
							}
						 });
						});
					},
					fail:function(res){
						console.log('保存错误',res);
					},
				})
				
			},